Overview

By default, you must use the GOV Frontend typography and GDS Transport typeface for sites on GOV.UK, except for the following situations:

  • all internally-facing products for DfE staff
  • all products provided on the education.gov.uk domain

To ensure your service meets the requirements for when your service isn't on GOV.UK, you should use the following guidance.

Typeface vs font

Typeface
This is the name given to a specific design of letting, in this case Inter is a typeface. Other examples of typefaces include Aptos, Arial, and Helvetica.
Font
Fonts are variations of the typeface, for example, light, regular, bold, and style, for example, italic, underlined.

Import the typeface

We are migrating to use the web-font Inter in our products and services that are not provided on GOV.UK.

Inter is a web-based, open source font. If your product is available to the internet you can include these by adding the following imports to your SCSS/CSS files, otherwise you'll need to bundle the physical fonts in your build. Styles will drop to system fonts if the internet is not available.

Inter is automatically included in Figma in the font options within the text panel.

Configuration

Before all other imports, reference the Inter font.

scss/css file

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

On the next line, after importing Inter, but before the inclusion of GOV Frontend styles

scss/css file

$govuk-font-family: 'Inter', sans-serif;

All styles which use the GDS Transport typeface will now be replaced with the Inter typeface.

You do not need to use different classes.