Overview

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

If your site is on education.gov.uk, you must use the inter typeface.

The only exception to this is where you are using education.gov.uk to host a service in private beta and will eventually be on service.gov.uk domain. You're fine to use the GDS Transport and GOV.UK header in this instance.

If you're unsure, contact DesignOps.

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 Inter 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.

Create a settings.scss file

This guidance is accurate up to and including version 13.16.2 of the GOV.UK Prototype kit.

If something doesn't work contact DesignOps for help so we can understand the problem and improve guidance where possible.

If it doesn't exist, create a settings.scss file in /app/assets/sass folder.

settings.scss file

Add the following code to the file.

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); $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.