Font loading strategy

[jroebu14]

Is your feature request related to a problem? Please describe.
Related to the findings mentioned in this issue https://github.com/bbc/simorgh-infrastructure/issues/1312

Our fonts are loaded synchronously (blocking) and are prioritised above JS bundles because CSS with font paths are inlined in the html near the top of the document before most other assets.

Describe the solution you'd like
We should find a way to async load our fonts so that other assets such as JS bundles are prioritised above the font requests.

The async font loading solution should also work with JS disabled.

This is an investigation/spike issue to find a solution that fits best in the Simorgh application and works best for our users.

A separate issue to outline the approach should be written after the completion of this spike.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Testing notes
[Tester to complete]

Dev insight: Will Cypress tests be required or are unit tests sufficient? Will there be any potential regression? etc

• This feature is expected to need manual testing.

Additional context
Add any other context or screenshots about the feature request here.

[neildoughty]

I suspect i'm misunderstanding this, but i always presumed we were using font-family to help with this:
https://developers.google.com/web/updates/2016/02/font-display

We planned to use OPTIONAL for fonts which are there solely for aesthetic reasons (eg Reith for Mundo), and SWAP when we consider the font essential to the reading experience (eg Mallana for Telugu).

[jroebu14]

@neildoughty you are correct - we are using font-display. Apologies, I'm playing catch-up on how we handle font loading. I'll change the above description of the issue because after doing some reading I'm not convinced that asynchronously loading fonts is a good idea based on this https://web.dev/optimize-webfont-loading/

My current thinking is that we need to have a separate stylesheet for fonts that we preload to solve the problem of fonts being prioritised ahead of our javascript bundles. We think this problem exists because the font declarations are inlined in the HTML at the top of the document and the browsers sees the font files before JS bundles and dispatches requests for the fonts. I'm not 100% certain that this will solve the problem though. I can try this out locally and report back.