@font-face support

First off, thanks for this great extension!

I’d find it to be super useful to have support for toggling @font-face rules to test fallback fonts in the order of variable fonts → web fonts → system fonts.

Cheers

[keithclark]

After digging deeper into this and talking to others it looks like css-tricks is using JavaScript to load the fonts using the Font Loading API, which is why they continue to render despite removing all font related CSS rules.

It looks like the workaround for this is to use document.fonts.clear(), which should clear out everything. Working out when to call that method is the next piece in the puzzle.

This looks like an edge case so, in the short term, I’m tempted to create a PR based on https://github.com/keithclark/css-feature-toggle-devtools-extension/issues/6#issuecomment-454378761 so @font-face toggling is possible in the majority of cases.

[keithclark]

I’ve done investigation work…

The extension is behaving as it should. When disabling @font-face support, the style element that sets the font name in CSS Tricks looks like this (note the -disabled- prefix on the @font-face declaration):

… and when you re-enable support, the same block looks like this:

If you use the Elements tab to rename that font to Rubik2, Chrome will continue to use the old name and the new one. Therefore, anything using font-family: Rubik will still be rendered with a custom font, which I believe is a bug.

Also, if you remove that entire <style> block, the font is still applied. Again, I think that’s a bug.

My hunch is this is caused by <link rel="preload"> but more investigation is required:

<link rel="preload" href="https://css-tricks.com/wp-content/themes/CSS-Tricks-17/fonts/Rubik-Bold-kern-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://css-tricks.com/wp-content/themes/CSS-Tricks-17/fonts/Rubik-Regular-kern-latin.woff2" as="font" type="font/woff2" crossorigin>