search

Financial-Times / dotcom-page-kit

📰 Page Kit provides a high quality, well tested, and thoroughly documented set of tools for assembling and delivering FT.com based upon the best industry standards.
https://financial-times.github.io/dotcom-page-kit/
21 stars 6 forks source link

Sort out web font loading #763

Closed i-like-robots closed 4 years ago

i-like-robots commented 4 years ago

The implementation of web fonts is currently split between the shell and layout components and is comprised of several parts:

  1. Resource hints for the required font files (shell)
  2. The progressive loading class names (layout)
  3. The embedded JS snippet which checks which cookies are set (layout)
  4. The initialisation of the o-typography component (layout)
  5. The CSS font face rules (n-ui-foundations)

It is not ideal having the implementation split between so many components. The integration is also not accessible from apps so there is no way to indicate which fonts are needed and which aren't.

Most importantly, the embedded JS snippet should be placed in the document <head> to avoid FOUT but since the <Shell /> component does not provide a client-side JS module that would mean initialising o-typography separately elsewhere 😬

In short we need to solve the following problems:

  1. Colocate all web font configuration and code
  2. Move the embedded JS snippet to the most optimal location
  3. Ensure additional web fonts (such as Metric Medium on article pages) can be configured

References

i-like-robots commented 4 years ago

I have scheduled a chat with @notlee to discuss web font loading for 2020.

i-like-robots commented 4 years ago

We currently configure 5 fonts in our CSS https://github.com/Financial-Times/n-ui-foundations/blob/master/typography/main.scss#L5-L15

But only 4 are configured to be ~loaded~ watched by o-typography: https://github.com/Financial-Times/o-typography/blob/ce625323d492395784f384358a6e65d0c43df484/src/js/typography.js#L25-L46

notlee commented 4 years ago

Hey, o-typography js doesn't load fonts. It stores which fonts have loaded (in a cookie 😷) and switches some class names so we can resize fallback fonts, to minimise the effect of FOUT. We don't resize all fallback fonts faces, only four, but may use more

i-like-robots commented 4 years ago

Have replaced "loaded" with "watched" =]

i-like-robots commented 4 years ago

I'm going to close this as #770 has centralised all of the font loading configuration and information.