search

keithclark / css-feature-toggle-devtools-extension

A devtools extension for toggling CSS features allowing developers to see how pages/apps render in browsers that don't support modern CSS features
MIT License
161 stars 5 forks source link

@font-face support #6

Closed ghost closed 5 years ago

ghost commented 5 years ago

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 commented 5 years ago

It should be possible to disable custom fonts with the atRuleIdentifier helper that's used to disable @supports

My experience with variable fonts is limited. Do you have any thoughts on how to disable them? Is it a case of disabling these rules (or a subset of them)?:

font-style: oblique [value] [...value];
font-variation-settings: [value];
font-optical-sizing: [value];
font-synthesis: [value];
font-stretch: [value];
keithclark commented 5 years ago

I very quickly tested with this and custom fonts toggle as expected for me in Chrome:

import {atRuleIdentifierOption} from '../feature-helpers.js';

export default atRuleIdentifierOption({
  name: 'Custom fonts',
  group: 'Other',
  help: 'Disable support for loading custom fonts',
  identifier: 'font-face'
});

Is there a specific URL you're testing against that's failing?

keithclark commented 5 years ago

Interesting. I'll take a look into what's unique about those sites.

keithclark commented 5 years ago

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):

screen shot 2019-01-16 at 00 03 35

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

screen shot 2019-01-16 at 00 03 19

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>
keithclark commented 5 years ago

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 commented 5 years ago

13 should covers the first part of this issue.

keithclark commented 5 years ago

Closing this issue as remaining work is covered by #15