[css-fonts] Clarification on behaviour when modifying @font-face rules

[keithclark]

I'd like some clarification on how fonts should be handled if the @font-face block that describes them is modified after the document has loaded.

Using any of the methods below, my expectation (which could be wrong) is that the browser should stop rendering text using a custom font:

• Invalidating the @font-face rule by renaming it to something like @-disabled-font-face
• Changing the font-family value in a @font-face rule but not updating the font-family elsewhere
• Changing the src value in a @font-face rule
• Disabling a stylesheet containing an @font-face rule
• Deleting a stylesheet containing an @font-face rule

However, Safari, Chrome and Firefox all continue to render text using the font. Is this the expected behaviour? If so, could somebody point me to the part of the spec that defines it?

[upsuper]

• Invalidating the @font-face rule by renaming it to something like @-disabled-font-face

You should not be able to do this at all via any interface. Parsing will fail at the very least.

• Changing the font-family value in a @font-face rule but not updating the font-family elsewhere
• Changing the src value in a @font-face rule
• Disabling a stylesheet containing an @font-face rule
• Deleting a stylesheet containing an @font-face rule

Ideally, they should work as if they are initially setup that way.

However, Safari, Chrome and Firefox all continue to render text using the font. Is this the expected behaviour? If so, could somebody point me to the part of the spec that defines it?

Could you paste code here for how you change them? That would probably be easier for others to figure out what is happening.

[keithclark]

Thanks for the reply.

You should be able to perform the actions above in any of the listed browsers using devtools.

Regarding the first point, you can do this by directly modifying the text content of a <style> element. I've been using https://css-tricks.com/ to test these states (see keithclark/css-feature-toggle-devtools-extension#6 (comment) for more context.)

[upsuper]

The behavior on https://css-tricks.com is indeed very interesting that I cannot explain from a brief test. I also tried in https://areweasyncyet.rs/ which is a website I was recently working on, and everything seems to work as expected via editing the style for that site, so I would guess that either there is a common bug among browsers, or there is some interesting behavior hidden in some corners of the spec that I don't know yet...

[litherum]

Yeah, you’re right that we should investigate this and describe it in the spec.

[keithclark]

If it helps, I found an overview of the font loading method: https://css-tricks.com/design-v17/#article-header-id-8

Digging into the implementation a little deeper, for any given document it looks like fonts are being loaded with:

• <link preload="..." as="font">
• @font-face defined in a <style> element
• with JavaScript using FontFace() / document.fonts.add

[upsuper]

OK, I think we should close this issue.

The special behavior on css-tricks.com is purely because it's using multiple approaches to load the same set of fonts. Specifically, you can find the following code in their script:

if ('fonts' in document) {
  var e = new FontFace('Rubik', 'url(/wp-content/themes/CSS-Tricks-17/fonts/Rubik-Regular-hint-all.woff2) format(\'woff2\'), url(/wp-content/themes/CSS-Tricks-17/fonts/Rubik-Regular-hint-all.woff) format(\'woff\')'),
    t = new FontFace('Rubik', 'url(/wp-content/themes/CSS-Tricks-17/fonts/Rubik-Bold-hint-all.woff2) format(\'woff2\'), url(/wp-content/themes/CSS-Tricks-17/fonts/Rubik-Bold-hint-all.woff) format(\'woff\')', {
      weight: '700'
    });
  Promise.all([
    t.load(),
    e.load()
  ]).then(function (e) {
    e.forEach(function (e) {
      document.fonts.add(e)
    })
  })
}

If you clear these manually added fonts via document.fonts.clear(), then changes to stylesheet would work as expected.

[svgeesus]

Agreeing that the reported issue is caused by the same fonts being loaded by multiple routes - so if the CSS is changed or invalidated, but the others are not, they still have an effect.