Including Google Fonts link or import?
What is the preferred way of including Google Fonts on a page?
- Via 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=Judson:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> - Via import in a stylesheet
@import url('https://fonts.googleapis.com/css2?family=Kameron:wght@400;700&display=swap'); - Using the Web Font Loader
Solution 1:
For 90%+ of the cases you likely want the <link> tag. As a rule of thumb, you want to avoid @import rules because they defer the loading of the included resource until the file is fetched.. and if you have a build process which "flattens" the @import's, then you create another problem with web fonts: dynamic providers like Google WebFonts serve platform-specific versions of the fonts, so if you simply inline the content, then you'll end up with broken fonts on some platforms.
Now, why would you use the web font loader? If you need complete control over how the fonts are loaded. Most browsers will defer painting the content to the screen until all of the CSS is downloaded and applied - this avoids the "flash of unstyled content" problem. The downside is.. you may have an extra pause and delay until the content is visible. With the JS loader, you can define how and when the fonts become visible.. for example, you can even fade them in after the original content is painted on the screen.
Once again, the 90% case is the <link> tag: use a good CDN and the fonts will come down quick and even more likely, be served out of the cache.
For more info, and an in-depth look at Google Web Fonts, check out this GDL video
Solution 2:
If you are concerned about SEO (Search Engine Optimization) and performance, it's good to use the <link> tag because it can preload the font.
Example:
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2" as="font" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2" as="font" crossorigin>
<style>
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 400;
src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
For more info read this: https://ashton.codes/preload-google-fonts-using-resource-hints/
Solution 3:
Use the <link> provided by Google because there is versioning on the font, but right above it use HTML5's preconnect feature to ask the browsers to open a TCP connection and negotiate SSL in advance with fonts.gstatic.com. Here's an example, which obviously needs to reside in your <head></head> tag:
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
Solution 4:
I understand the suggestion from other answers is to use <link> in the html files.
I recently realized that there is a use case for me to use @import inside the css file.
The reason is simple: I am making static sites for my side projects and I value convenience way over SEO or compatibility to rare platforms, etc.
The benefit of using @import inside the css file is that if I want to change the fonts, all I need to do is modify a few lines in the css file. That's it, end of the story. If I use <link> in the html files, in addition to change the font in the css file, I will also have to update and upload all the html files, which is kind of inconvenient.
So long story short: @import is self-contained inside the css file, so it's convenient for update. And it's especially useful for testing and trying different fonts.