[Don't merge] Add v2 of the font to the fonts.css.erb file

[Nooshu]

Now that the new font loading strategy is live in govuk_template and GOV.UK we can now move onto the next iteration of improving frontend performance.

Issue

The first version of the custom font wasn't 100% optimised for the web. This has created four main issues:

1. the filesize for all versions of the font is larger than it needs to be
2. we require a separate font for the tabular numbers used in data tables
3. the glyphs sit too high in the fonts bounding box which leads to the need for correction in the CSS
4. hinting requirement for oldIE (EOT) increases the filesize even further

Version 2 of the font has been created to solve all three of these issues. See below for information around each of the issues listed.

Filesize

The filesize of the current font is bigger than it needs to be. The new font has been optimised to fix this issue. See the table below comparing the unhinted version of the font.

Font	v1	v2	Difference
Bold WOFF2	55KB	32KB	-42%
Bold WOFF	73KB	41KB	-44%
Bold EOT	72KB	57KB	-21%
Light WOFF2	68KB	33KB	-51%
Light WOFF	96KB	43KB	-55%
Light EOT	92KB	57KB	-38%

The new fonts will reduce the download requirement by 58KB for browsers that support WOFF2 and by 85KB for WOFF browsers. For EOT usage see below.

Tabular numbers

Version 1 of the font was missing the details required to enable embedded tabular numbers. Version 2 now allows us to control this tablular number setting using CSS, thus removing the need for two other fonts (tabular-light, tabular-bold). This tabular setting can be enabled using the following example CSS:

.tabular {
    font-feature-settings: "tnum" 1;
}

@supports(font-variant-numeric: tabular-nums) {
    .tabular {
        font-feature-settings: normal;
        font-variant-numeric: tabular-nums;
    }
}

The difference this setting makes can be seen in the screenshot below. Older browser will fallback to font-feature-settings, where as newer browser will see the @supports rule and use font-variant-numeric.

Glyph position

The position of the the glyphs sits slightly too high in version 1 of the font which causes the need to compensate with uneven vertical padding in some areas then building frontend components. This positioning has been rectified in version 2 but it also means this compensation will need to be removed. The positioning change is most noticeable in the following areas:

• GOV.UK Logo
• Headings
• Buttons

An example of each component with before / after can be seen below:

Logo

Headings

Buttons

The positioning also causes problems when rendering between the custom font and the fallback (Arial). There is a significant difference between the positioning so CSS that works for 'nta' will look broken when using Arial. The new positioning change will fix this. Example GIF's below show the difference between the two versions.

Version 1 fallback to Arial

Version 2 fallback to Arial

Hinting requirement and EOT usage

Some older browsers on old operating systems require font hinting to make the font look more legible on these systems. This font hinting can increase the font size quite dramatically. The table below shows the size of the hinted version of the font and the effect GZipping will have when used:

Font	Size	GZipped	Difference
Bold WOFF2	104KB	n/a	n/a
Bold WOFF	145KB	141KB	-3%
Bold EOT	296KB	118KB	-60%
Light WOFF2	119KB	n/a	n/a
Light WOFF	190KB	182KB	-4%
Light EOT	445KB	163KB	-63%

I investigated which operating systems and browser required font hinting and compared them against analytics data from GOV.UK. The full spreadsheet can be seen here. From the data I can see that there are only a small number of users that require font hinting, it works out to be around 0.72% of monthly users across GOV.UK.

Of those browsers that require hinting even fewer only support EOT format font files. Many hinted browsers also support the WOFF file format. As can be seen by the file sizes in the table above for us to deliver a hinted EOT version to these older browsers would be around 281KB (gzipped) for both font files (bold + light). This is a huge download for browsers and devices that are the least equipped to deal with it.

The solution I am proposing is that we don't serve an EOT version of the version 2 font. Most browsers will receive the WOFF / WOFF2 versions of the font. The lowest spec browsers and devices will simply get the fallback font (Arial). There are two main advantages to this solution:

1. These older devices won't have the huge 281KB of font files to download
2. In using the fallback font Arial they will be using a fully hinted system font so the text will render smoothly

The disadvantage is that 0.72% of GOV.UK traffic per month won't receive the custom font. This is a small disadvantage compared to the performance overhead required to supply the custom font to these browsers.

Multiple font versions

We are now including version 1 and version 2 of the font in the same fonts.css.erb file. Browsers are intelligent enough to only load a font once it is referenced in a font-family CSS property. These two sets of @font-face references can co-exist without adding additional font requests.

When it comes to usage in a live application you should only choose one version of the font, either version 1 or version 2. Referencing both versions in your CSS font stack will trigger multiple font requests and add additional page load for your users.

Font-display: swap

After some research I have changed the font-display CSS property from fallback to swap. To quote from Addy Osmani:

...self-hosted Web Fonts have a zero second block period and an infinite swap period. Browsers would draw text immediately with a fallback used if the font face isn't loaded, but swap as soon as it does load.

More discussion about this change can be seen here, here and here.

Implications

This is a simple PR but it has many implications for other repo's that depend on govuk_template. The following repositories have been identified and will require modifications to make use of this font:

• govuk_frontend_toolkit
• govuk_elements

This work will need to be done concurrently before this PR can be merged.

[Nooshu]

Closing PR, issue with the same information has been raised on GOV.UK Frontend.

[36degrees]

Thanks, @Nooshu!