Skip to content
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

BBC Reith Qalam doesn't load in Firefox #9689

Open
1 of 2 tasks
ghost opened this issue Nov 20, 2021 · 3 comments
Open
1 of 2 tasks

BBC Reith Qalam doesn't load in Firefox #9689

ghost opened this issue Nov 20, 2021 · 3 comments
Labels
blocked This issue should not be worked on until another internal issue is completed - see desc for details bug Something isn't working low-priority

Comments

@ghost
Copy link

ghost commented Nov 20, 2021

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
image
image

Desktop (please complete the following information):

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

Testing notes

  • This bug fix is expected to need manual testing.

Checklist

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?

@ghost ghost added the bug Something isn't working label Nov 20, 2021
@hirmanpour
Copy link

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
Copy link
Contributor

HarveyPeachey commented Feb 7, 2022

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 HarveyPeachey added the blocked This issue should not be worked on until another internal issue is completed - see desc for details label Feb 7, 2022
@HarveyPeachey
Copy link
Contributor

Blocked until we decide on our font loading strategy for WS

@HarveyPeachey HarveyPeachey removed their assignment Feb 7, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
blocked This issue should not be worked on until another internal issue is completed - see desc for details bug Something isn't working low-priority
Projects
None yet
Development

No branches or pull requests

3 participants