Including Google Fonts link or import?

fonts webfonts google-webfonts

115,431

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.

View more solutions

115,431

kajo

JAVA & jQuery & Scala & Lift & HTML & CSS

Updated on October 18, 2021

Comments

kajo over 2 years
What is the preferred way of including Google Fonts on a page?
1. 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">
```
2. Via import in a stylesheet
```
@import url('https://fonts.googleapis.com/css2?family=Kameron:wght@400;700&display=swap');
```
3. Using the Web Font Loader
- Obmerk Kronen about 8 years
  
  You might also want to read this question before using google fonts at all . depending on the specific project - it might not always be the smart choice .
- mercury over 2 years
  
  @ObmerkKronen for the Link
- enigma6174 over 2 years
  
  Why do we need the preconnect links? I tried this without the preconnect links and it worked fine
Alex almost 10 years

"because they defer the loading of the included resource until the file is fetched" - isn't that a good reason to use @import? Because normally you don't want to see the content until the font has loaded (to avoid that font flicker)
rvighne almost 10 years

The Web Fonts API is very useful when working with HTML5 Canvas. You can't use a font that hasn't finished loading before drawing text with it, and of course once the font is loaded it isn't automatically updated. Relatedly, the API is needed for tracking progress of loading assets, e.g. in a game.
Gal about 9 years

This information should be on the Google Web Fonts page. It just presents the three options to you - and doesn't give any helpful hints as to which one to use and when.
James Cushing over 8 years

Google's own 'Getting Started' tutorial uses only the <link> method, so I guess that's the one they recommend in an unspoken fashion
Elijah Mock over 4 years

You may want to add rel="preload" to the <link> tag, too, because then the font will be loaded before the text appears. See 3perf.com/blog/link-rels
BadHorsie over 4 years

Is it correct that the preconnect is a completely different domain than the stylesheet link in your example? fonts.gstatic.com versus fonts.googleapis.com
Mark Cilia Vincenti over 4 years

@BadHorsie it's the whole point of it. The stylesheet on fonts.googleapis.com has a link to a resource on fonts.gstatic.com. You're telling the browser to initiate a connection to the latter host so that it would have connected or started connecting by the time it finds the link in the stylesheet.
aruno almost 3 years

the google fonts <link> tag now uses rel="preconnect" . This will speed up DNS and the TLS / TCP connection to the server without using up bandwidth right away in downloading the font. I think the idea here is to get the handshaking out of the way ASAP (which can take time) but without using up too much bandwidth. Fonts are ultimately not as important as other resources on the page. So preconnect is a best of both worlds approach. You can't preload everything unfortunately! stackoverflow.com/questions/52764401/…