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'm trying to optimize this website: electronicsportsitalia-it and when i try to analyze it on Google PageSpeed the platforms says that there is a google font blocking the page rendering:
https://fonts.googleapis.com/css?family=Lato:300,400,700
The font firstly was loaded through php but then i inserted it directly in html code trying to load it with this code: <link rel=stylesheet id=avia-google-webfont href='//fonts.googleapis.com/css?family=Lato:300,400,700' type='text/css' media=all lazyload> -put also before the </body> tag- but it didn't worked.
So i tryed to load it with Web Font Loader and actually the website is runnging this script:
`
</script>
<script>
WebFont.load({
google: {
families: ['Lato']
}
});
</script>`
but always the same problem on PageSpeed.
Can someone help me?
You can preload any styles (including google fonts)
<link
rel="preload"
href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
as="style"
onload="this.onload=null;this.rel='stylesheet'"
/>
<noscript>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
rel="stylesheet"
type="text/css"
/>
</noscript>
You can read more on web.dev
UPDATE
Base on Lucas Vazquez comment I've also added &display=swap (which fixes this issue "Ensure text remains visible during webfont load")
You question boils down how to include less critical CSS asynchronously. I recommend to read this article.
Its similar to Claudiu's answer however, it is recommended in the article not to use preload, because of this:
First, browser support for preload is still not great, so a polyfill (such as the one loadCSS provides) is necessary if you want to rely on it to fetch and apply a stylesheet across browsers. More importantly though, preload fetches files very early, at the highest priority, potentially deprioritizing other important downloads, and that may be higher priority than you actually need for non-critical CSS
Here is the alternative:
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
media="print"
onload="this.media='all'"
/>
<noscript>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
rel="stylesheet"
type="text/css"
/>
</noscript>
This is how it works. The attribute media=print will skip the css on page rendering. Once the page has loaded, it will load the print css. The onload JS event changes the media to all, now the font will be loaded and change the page rendering. Most importantly, the font will no longer render-block your page.
For the edge case, that a user has js disabled, the "noscript" tag will load the font directly.
You can take advantage of the onload attribute like this -
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap"
rel="stylesheet"
type="text/css"
media="print"
onload="this.media='all'"
/>
Set the media attribute to print at first, but change it to all when the download callback fires.
I noticed that Laravel added this tag to its html head output recently:
<link rel="preconnect" href="https://fonts.gstatic.com">
I copied it and added it before my font request, i.e:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" id="google-fonts-css">
This simple tag took me from a Mobile Pagespeed score of 80 up to 95, but I can't be entirely sure that it was in fact the tag I have to thank for this score increase - PageSpeed is unpredicatable. I'm not sure if it's just a Chrome thing or a new standard.
In my case, I will generate my font using a font-face generator tool which is easier to use and less hassle but when I use google fonts, this is what I do.
You can use style element at the end of body, just before the closing </body> tag:
<style>
#import "//fonts.googleapis.com/css?family=Lato:300,400,700"
</style>
or you can refer to How to keep CSS from render-blocking my website?
The following font files must be loaded before this JS file: https://electronicsportsitalia.it/wp-content/plugins/google-analytics-for-wordpress/assets/js/frontend.min.js
https://fonts.gstatic.com/s/lato/v14/EsvMC5un3kjyUhB9ZEPPwg.woff2
https://fonts.gstatic.com/s/opensans/v15/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2
https://fonts.googleapis.com/css?family=Lato
https://fonts.gstatic.com/s/roboto/v18/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2
https://fonts.gstatic.com/s/lato/v14/EsvMC5un3kjyUhB9ZEPPwg.woff2
I made an external style sheet, uploaded it to godaddy, and gave my main page the link
<link rel="stylesheet" type="text/css" href="myStyle.css">
and it worked, but not on Firefox (it did work on all other browsers I tried). Then I tried to link my other pages to the style sheet and it did not work for them (copied and pasted the link tag above, but when that didn't work I tried doing
<link rel="stylesheet" type="text/css" href="/public_html/myStyle.css">
which is the full file directory to the style sheet, and that didn't work either. Note: When I just opened the other pages on a browser, (without uploading to godaddy) the external style sheet worked in all of my pages.
This is the first time I'm trying this, so might be making an obvious mistake. Thanks in advance.
Background: For the website I am on (a roleplay forum) you are allowed to use custom css and html in posts. To do this, you have to use a [dohtml] BBCode tag. Then you can insert any css/html you wish.
Problem: Some users have used linked stylesheets to make theirs show up. And it works. But mine doesn't.
Other: I am unable to use a tag, because it's not a full html document. I am using it in the same manner, but for some reason mine is not working. Can anybody help me with this? Is there something wrong with my CSS?
<link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/23ktd8q6bdekhi8/scorix.css" />
EDIT: When someone links to this one, it works fine
<link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/w2uh6gphwjgmenu/betteralone.css?dl=1" />
The link should be a direct download link. This should work (at least, let's hope so):
https://dl.dropboxusercontent.com/s/23ktd8q6bdekhi8/scorix.css?dl=1&token_hash=AAFS1EYWJejOVo_PQ8c8RSK0rRbKC0kPt0fXEz5T7i5A7Q
Other than that, I don't see anything wrong with your HTML link code and your CSS validates flawlessly.
I'm using the Roboto font in my website and it's rendering like the following in Chrome (Windows)
The font renders OK in iOS.
How can I fix this? Any help is appreciated :)
I had a similar problem.
Instead using the standard code provided by google,
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
I added a crossorigin="anonymous" property tag.
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css' crossorigin="anonymous">
Sincerely, I don't know the real reason, but it worked. Hope that works for you too.