BBC Reith Qalam doesn't load in Firefox

[ghost]

Describe the bug On sites that use BBC Reith Qalam, like the BBC Persian site, the font doesn't load and instead falls back to Arial. This does not occur in Chrome.

To Reproduce Steps to reproduce the behaviour:

1. Go to (https://www.bbc.com/persian) in Firefox
2. Open developer tools and view font
3. See error

Expected behaviour BBC Reith Qalam would be used, not Arial

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Firefox
• Version: 94.0.1

Testing notes

• [x] This bug fix is expected to need manual testing.

Checklist

• [ ] (BBC contributors only) This issue follows the repository use guidelines

Additional context Add any other context about the problem here. https://ws-downloads.files.bbci.co.uk/fonts/index.html also seems to have gone down for some reason?

[hirmanpour]

Hi,

I can confirm that this also happens with Firefox on Linux (tested on Centos + Arch).

The specific errors are:

downloadable font: font-display timeout, webfont not used (font-family: "BBC Reith Qalam" style:normal weight:400 stretch:100 src index:0) source: https://ws-downloads.files.bbci.co.uk/fonts/ReithQalam/v1.100/normal.woff2

downloadable font: font-display timeout, webfont not used (font-family: "BBC Reith Qalam" style:normal weight:700 stretch:100 src index:0) source: https://ws-downloads.files.bbci.co.uk/fonts/ReithQalam/v1.100/bold.woff2

Those woff2 webfont URLs return error code 403 (unlike their .woff counterparts).

[HarveyPeachey]

Investigation

After further investigation, the cause of this issue stems from the font loading strategy used for Reith Qalam. We use the font-display: optional CSS property for our font loading strategy. Here is a nice explanation on font-display

-   `optional`: Like  `fallback`, this value tells the browser to initially hide the text, then transition to a fallback font until the custom font is available to use. However, this value also allows the browser to determine whether the custom font is even used at all, using the user’s connection speed as a determining factor where slower connections are less likely to receive the custom font.

This bug has been reported to Mozilla, and it seems the underlying cause is that the fonts are loading correctly on the first visit and are cached, but for some reason on subsequent visits, because the fonts are cached, this causes a timeout on Firefox when font-display: optional is used.

This issue is actually occurring on multiple services as well, that are using this font loading strategy:

Reith Qalam - Arabic, Persian, Pashto, Urdu Reith Serif/Sans - Mundo, Portuguese, Russian, Turkce Noto Serif Bengali - Bengali

Solution Options

1. On the same reported bug discussion, this issue has been reported with a BBC product before, see here. There suggestion is to use a header Cache-control: immutable and <link rel="preload"/> to preload fonts. However, it seems this might not work in all instances as reported in the bug discussion.
2. We use a different font loading strategy for these fonts, the other font loading strategy we use in Simorgh already is font-display: swap, so we could switch the broken fonts to that however, this may cause CLS issues due to having an infinite swap duration time when loading in fonts. There is also font-display: fallback, which works exactly like font-display: optional, with the only difference being that it doesn't use a users connection speed to determine whether the user would be able to load the font within 3 seconds.
3. We can just live with the fact that these fonts will fallback to Arial on Firefox depending on our decision for font loading strategies

[HarveyPeachey]

Blocked until we decide on our font loading strategy for WS