fruid Posted November 29, 2020 Share Posted November 29, 2020 where to preload fonts? because my <head> (_head.php) is included in _main.php which is loaded last. _init.php? ready.php? these are my preloading tags: <link rel="preload" as="font" href="<?=urls()->templates?>styles/MyFontsWebfontsKit.css" type="text/css" crossorigin="anonymous"> <link rel="preload" as="font" href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" type="text/css" crossorigin="anonymous"> I tried all the above, if I delete cache, I still get a peek at the content without the fonts. Link to comment Share on other sites More sharing options...
MoritzLost Posted November 29, 2020 Share Posted November 29, 2020 Preloads should go in the <head> of your HTML, before most of your other assets, so they can be discovered and preloaded very early. The root of your FOUT issue lies somewhere else, however. The problem is that you're only preloading the CSS file from Google Fonts, but not the fonts themselves. Check out the CSS file you're preloading - it's only 9 lines! So preloading this will have a negligable effect (DNS preconnect or prefetch would be more useful in this case). That's because the CSS file only includes the @font-face definition which includes the URL to the actual font file. In modern browsers, this will be a woff2 file - this is what you want to preload. One caveat of this is that older browsers which don't support woff2 will receive a different font file in a different format, so those users will have preloaded the woff2 gratuitously. On the other hand, if you add preloads for all available font formats, everyone will receive multiple files they don't need. Personally, I would only preload the woff2 file. I would also recommend hosting the fonts locally - if you're in the EU, this is kind of necessary for GDPR compliance. And since Browsers nowadays have segmented caches anyways, loading the fonts from Google isn't that much faster. It also helps to have a predictable URL to preload the font from - if you preload the font file from Google, the preload will break any time a new version of the font is released (see the version number in the URL above ...). 5 Link to comment Share on other sites More sharing options...
bernhard Posted November 30, 2020 Share Posted November 30, 2020 17 hours ago, MoritzLost said: I would also recommend hosting the fonts locally ? https://google-webfonts-helper.herokuapp.com/fonts 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now