In our website we using external Google font:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#300;400;500;700&display=optional" rel="stylesheet">
As a result it returns CSS like this:
#font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 300;
font-display: optional;
src: url(https://fonts.gstatic.com/s/rubik/v19/iJWKBXyIfDnIV7nMrXyi0A.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
...
When new users first time comes to site fonts are never do apply - and that acceptable to me, because it's one of the drawbacks of using font-display: 'optional'. Also I can confirm that both CSS file from Google and fonts are still loaded by the browser and are cached (they are just do not apply on first page visit). CSS file is cached for 24h and font files itself are cached for 1 year. If I reload same page (Ctrl+R) then fonts are applied. So far all good.
But the problem is that if I open same page in new Chrome tab (i.e. new session) then fonts doesn't apply again. I checked DevTools's Network tab and I can confirm that fonts were loaded from Disk Cache. Since fonts were loaded from cache I expect that they will be applied every time until cache time expires - but that doesn't happen. Fonts are applied only if I'm refreshing same Chrome tab. New sessions (new tabs) gives me page without fonts.
I understood 1 thing: if I do simple page reload (Ctrl+R) then I see that fonts were loaded from Memory cache, and fonts are applied. But new sessions (new tabs) will cause fonts to load from Disk cache - and probably that's why they don't apply. On my developer machine I have pretty fast M2 SSD disk, so it's a little bit weird why Disk cached fonts doesn't apply.
One more thing may worth to mention - I have pretty bad Total Blocking Time score (Core Web Vital TTB metric). Can it be the reason why Disk cached fonts do not apply?
Is there some way to fix this problem?
Thanks.
This is happening because you are using display: optional, as stated yourself. You need to make this to display: swap in order for things to work properly. Below is what your updated links would look like:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#300;400;500;700&display=swap" rel="stylesheet">
Notice we are not using optional display anymore, so now cached fonts will apply, as requested.
If you are loading the external Google links in your <head> like this:
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#300;400;500;700&display=optional" rel="stylesheet">
</head>
Then in your CSS, you do not need to use the #font-face, you simply add the font-family to your class/tag, like so:
body {
font-family: 'Rubik';
font-size: 16px;
}
Just I have tested on my system on every new tab will load from the memory cache only if we use swap in the link tag.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#300;400;500;700&display=swap" rel="stylesheet">
Related
I've just deployed my website that I built using react.js, I am using Raleway font for the whole website, but when I opened it with my iphone using safari browser it shows me another font, how can I solve this problem ?
Do you import your font in your website? You can add those lines in your index.html so anyone that doesn't have installed Raleway (including mobiles apps) will be able to display it.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
If you need specific styles, you can select them and generate your import lines here: https://fonts.google.com/specimen/Raleway
I'm testing my page's performance through GTmetrix and I noticed that the biggest element loaded on my page is the font-family. Is there a way to lower this somehow? Here is how I load my font:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#500;600&display=swap" rel="stylesheet">
If you're using Google Fonts just for a few words, consider using the text parameter in the URL. The font will then only be loaded for the specified letters/characters.
Let's say you wanna use the font for the word 'Welcome'. By inserting &text=Welcome in the URL, you can load the font just for the six different letters of this word:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#500;600&display=swap&text=Welcome" rel="stylesheet">
This will reduce the size of the font file considerably.
Of course, this will not work if you need the whole set of characters.
I use 2 google font on my site.
In the HEAD preload the fonts:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Biryani:wght#400;700&family=Noto+Sans:ital,wght#0,400;0,700;1,400&display=swap" rel="stylesheet">
I set css below this:
body{margin:0;padding:0;font-size:14px;font-family: 'Noto Sans', sans-serif;line-height:1.2em ;background-color:#F8F9FA;}
h1,h2,h3,h4,h5,h6{font-family: 'Biryani', sans-serif;color:#404040}
Page Speed Insights, on the other hand, measures a CLS of 0.36 and reports most problems on the title and block of text.
Please help, what can I do.
The tested page url is: https://megveszlak.hu/elado-haz-godollo
Thank You
I'm trying to use variable fonts for the first time, namely Quicksand from Google fonts. Here are the tags it gives you...
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
It's definitely using Quicksand on the page but the problem is that when I change the font weight from 400 to 500 it doesn't change. 300 does nothing either but if I change it to a value above 550 it seems to go very bold. It's as if I've set it to download just two different weights, a very light one and a very bold one.
I looked around and found an article that said to do this:
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#100..900&display=swap" rel="stylesheet">
but that doesn't seem to have change anything. Am I missing something?
I found the problem. I was specifying a range of weights which exceeded the range available for this font. Instead of doing this:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght#200..900" />
I should have used 300..700
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght#300..700" />
Also, I wasn't always doing a proper refresh when changing the import because I've got too used to React's hot reloading but obviously if you change the font links in the head then you have to F5.
You aren't importing the font correctly. Here use this instead:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500;600;700&display=swap" rel="stylesheet">
On google fonts page you need to select all the font weights you want to import. Not just the base if you want to work with font weights.
I want to use the Google Font "Noto Serif" for my website.
My problem is that when I am testing it with Google PageSpeed Insights, it says everything is perfect except for one thing:
<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet">
Your page has 1 blocking CSS resources. This causes a delay in
rendering your page. None of the above-the-fold content on your page
could be rendered without waiting for the following resources to load.
Try to defer or asynchronously load blocking resources, or inline the
critical portions of those resources directly in the HTML.
I am aware of a bad solution for this. It's to link the font using <script> at the bottom of the HTML file. The problem with that solution is it causes a Flash of Unstyled Text every time you click on something in my website.
I am using jekyll hosted with GitHub Pages, so I don't think I can install Font Face Observer :(
You can load the web fonts asynchronously with this script:
<script>
WebFontConfig = {
typekit: { id: 'xxxxxx' }
};
(function(d) {
var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
wf.async = true;
s.parentNode.insertBefore(wf, s);
})(document);
</script>
You'll need this library, it's pretty easy to implement. I've learn this from a course I took recently, Responsive Web Design Fundamentals, if you're interested you can check it out here.
Based on this strategy to preload stylesheets:
<link rel="preload"
href="https://fonts..."
as="style"
onload="this.onload=null; this.rel='stylesheet'; document.body.classList.add('fontLoaded')">
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body.fontLoaded {
font-family: 'GOOGLE FONT', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
Add two attributes to your code. One is rel="preload" and the other is as="style". The final code would look like the below:
<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet" rel="preload" as="style">
Very simple approach:
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
Just replace styles.css with your font URL. It loads the font, and then once it finishes (onload) it "enables" it by switching the rel property to stylesheet.
More details here.
Only add block tag
https://fonts.googleapis.com/css?family=Noto+Serif&display=block
Ref : Controlling Font
Has any one tried this solution?
<!-- other <head> stuff -->
<!-- connect to domain of font files -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- optionally increase loading priority -->
<link rel="preload" as="style" href="(font CSS URL here)">
<!-- async CSS -->
<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="(font CSS URL here)">
<!-- no-JS fallback -->
<noscript>
<link rel="stylesheet" href="(font CSS URL here)">
</noscript>
</head>
Here ya go, include this in the body tag and not the head tag
<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet" lazyload>
Updated 2020
<link rel="preload" as="style" href="https://yourcss.css" onload="this.rel='stylesheet'" />