-
Notifications
You must be signed in to change notification settings - Fork 320
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update font to use v2 of GOV.UK Transport font. #1434
Merged
Merged
Commits on Jun 7, 2019
-
Configuration menu - View commit details
-
Copy full SHA for 0f0dc41 - Browse repository at this point
Copy the full SHA 0f0dc41View commit details -
Introduces v2 font as GOV.UK Transport
By default v2 font will been used unless the service is running in compatibility mode. Some services still need to use govuk template/elements. In the current state, the user would end up downloading two versions of the font. To avoid this issue we have created another flag to check if the the service is running in compatiblity mode by having any of these flags set: - $govuk-compatibility-govukfrontendtoolkit - $govuk-compatibility-govuktemplate - $govuk-compatibility-govukelements The new flag '$govuk-use-legacy-font' can also be overriden by setting its value to "true" just before importing govuk-frontend.
Configuration menu - View commit details
-
Copy full SHA for 20cff08 - Browse repository at this point
Copy the full SHA 20cff08View commit details -
Removes support for EOT and browsers older than IE8
Embedded Open Type (.eot) is a proprietary format, which no other browsers use apart from IE8 and older. As v2 font is so similiar to Arial, we have decided to remove EOT format. This means that IE8 and older will not be downloading any custom fonts like v1 and v2 of Transport but will instead use Arial by default. This commit also fixes an existing issue with IE 9-11 using EOT format by default instead of WOFF. This is because the browser would only look for and use the first format it finds that it supports. Thanks goes to Matthew Hobbs (@Nooshu)[https://github.com/Nooshu] for this recommendation. An extract of Matt's recommendation can be found below and at this link: #1356 (comment) I'd recommend removing the EOT versions of the fonts from the `@font-face` declaration. Only IE support this font format (including IE11). All but IE8 also support other font formats that are available. According to the last 30 days GOV.UK analytics, IE8 has had 9,054 "users" out of 50,566,007 (0.018%). EOT files can be compressed with Gzip (or Zopfli for 5% better compression), but even with this compression we are asking old browsers on legacy devices to download a fairly large amount of data (60KB) for unhinted versions of the font ([only Vista and XP require hinted versions](https://docs.google.com/spreadsheets/d/1l2SKP9D3Fm5EVk10j9K1CUSg_jCkW7Pef60TzK0ZKlI/edit#gid=0)). These browsers and devices are the least equipped to manage these assets. Font | Size (bytes) | Saving (bytes) | Saving (%) ------------ | ------------- | ------------- | ------------- Bold EOT uncompressed | 58932 | 0 | 0 Bold EOT gzipped | 30366 | 28566 | 48.4 Bold EOT zopfli | 28115 | 30817 | 52.3 Light EOT uncompressed | 58708 | 0 | 0 Light EOT gzipped | 29885 | 28823 | 49.1 Light EOT zopfli | 27589 | 31119 | 53 **Totals**: Uncompressed download - 118KB, Compressed (gzip) - 60KB, Compressed (Zopfli) - 56KB. I'd say it's a better strategy for this small number of devices is to use the fallback font of Arial, and not have them require to download the additional EOT assets. Since the new font now corrects the glyph placement in the bounding box, the fallback will render correctly without the need for additional adjustments to the vertical placement. If it is we decide to keep the EOT files in the `@font-face` declaration it's worth noting the container order will prevent IE9-11 from receiving the WOFF version of the font. Browsers pick the first font format it supports from the list. It will ignore any declarations after, (even if they are also supported). In the current setup IE9, 10 and 11 will download the EOT format even though they all support WOFF. Since WOFF files are already compressed using Gzip compression, developers don't need to worry about enabling compression on the server. If developers forget to enable Gzip compression on the server for EOT files (since we can't provide compressed versions of the EOT files) these users will be downloading 118KB vs 83KB (WOFF). Due to [all the hacks required](https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/) to make fonts work properly in older versions of IE there looks to be no way around this. This seems like another good reason to remove the EOT sources from the declaration. Recommended declaration ```css @font-face { font-family: "nta"; src: govuk-font-url("light-68f0c84f0e-v2.woff2") format("woff2"), govuk-font-url("light-222368e53d-v2.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "nta"; src: govuk-font-url("bold-9561e2d007-v2.woff2") format("woff2"), govuk-font-url("bold-5d3836b441-v2.woff") format("woff"); font-weight: bold; font-style: normal; font-display: swap; } ```
Configuration menu - View commit details
-
Copy full SHA for aaadfa4 - Browse repository at this point
Copy the full SHA aaadfa4View commit details -
Add CSS for Tabular numbers inside existing mixin
Thanks goes to Matthew Hobbs (@Nooshu)[https://github.com/Nooshu] for this recommendation. An extract of Matt's recommendation can be found below and at this link: #1012 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.
Configuration menu - View commit details
-
Copy full SHA for 72f3580 - Browse repository at this point
Copy the full SHA 72f3580View commit details -
Co-authored-by: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Configuration menu - View commit details
-
Copy full SHA for 048c956 - Browse repository at this point
Copy the full SHA 048c956View commit details -
revert back to using
font-display:fallback
We need to have a better understanding and test what it means for the font-display to use `swap` instead of fallback. A new issue has been created: #1437
Configuration menu - View commit details
-
Copy full SHA for 1a70708 - Browse repository at this point
Copy the full SHA 1a70708View commit details
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.