According to Google developer docs, “Applying a font is easy: just add a stylesheet link to your web page, then use the font in a CSS style.” As someone new to the word of coding, this simple instruction can seem confusing. This article is here to help you understand How to use Google fonts in HTML and CSS documents.
There are two ways that you can use Google fonts on your website. The first method is by importing the Google font using the <link> tag in your HTML document. The second method to import a Google font is to use the @import method in your CSS file.
Both of the above methods have their advantages and disadvantages. This article will explain each with code examples.
What are Google Fonts?
Google Fonts is a library of fonts that are free and open source. When you visit Google Fonts, you will be met with an interactive library of fonts available for use on your website.
Google Fonts was first released in 2010 and is continually updated through the GitHub repository; currently, there are approximately 1,300 font families to choose from n the library.
All fonts are released under open sources licences meaning you can use them on any commercial (or non-commercial) project.
Code to import Google fonts
Depending on if you want to bring your google fonts in by using the <link> tag in your HTML document or by using the @import method in your CSS file, the code to import google a font will differ slightly.
How to use Google fonts in HTML
Importing your Google font in your HTML document has a range of benefits. Importing your Google font with the <link> tag in your HTML document assists in terms of Search Engine Optimisation in that it increases performance.
Your website’s performance is improved because the <link> tag can preload the resource, which avoids deferring the font’s loading. When you preload a resource on your web page, you tell the browser to fetch the resource sooner because the resource is vital to the web page. As your fonts show all your website content, there is good reason to consider this resource vital and to want to preload it.
To preload any resource with the <link> tag, you can add a rel attributes with rel=" preload". Be careful not to get too excited. You cannot preload everything to make your site faster. Even if all your resources and elements were preloaded, the browser would still need to make its way through each line of code. This is why the preload attribute should be used only on very vital aspects.
When using Google fonts in HTML, you will use a preconnect attribute rather than a preload attribute.
What is the difference between “preload” and “preconnect”?
The preload attribute will load the resource first; this is normally done by downloading a resource. Preload is normally used for resources that a browser may not prioritise, for example, a background image.
Preconnect, on the other hand, is used to tell the browser that resources are needed from another source. This other source is the origin source. By preconnecting to the origin source, you can improve the performance of your site by letting the browser know in advance to connect to the origin.
While preconnect and preload may sound similar, they tell the browser different information. The preconnect attribute lets the browser know where it needs to connect to to get resources, while the preload downloads these resources first.
I am explaining this because you will see these references when you import Google fonts in your HTML or CSS files, so it is a good idea to understand what you are telling the browser to do.
Where to find the code to import fonts in your HTML
Once you have found a font that you want to use on your site from the Google Fonts library, click on the font style. You will then be presented with the below screen.
Select the style you want to import; you can select more than one.
If you do not see a column on the left-hand side of the page, click on the icon with the three squares on the right of the screen, as indicated above.
When importing Google fonts into an HTML document, you want to ensure that the “link” circle is selected. Below, you will find the code that you can import into your HTML document. Simply copy this code into the <head> section of your HTML document.
Code to import Google fonts in HTML
<!DOCTYPE html>
<html>
<head>
<title>How To use Google Fonts in HTML and CSS</title>
<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=Roboto:wght@100&display=swap" rel="stylesheet">
</head>
<body>
</body>
</html>
The above code alone will not change what the browser renders. You still need to add some styling to use the imported Google font to “activate” it. Below is the CSS that should be added to change the font to your selected Google font.
body{
font-family: "Roboto", sans-serif;
font-weight: 100;
font-size: 15px;
}
You can easily get the rules for the font family just below where you copied the code from on the Google fonts platform.
How to get Google fonts into CSS file
Another way to use Google fonts in your web page is by importing them into your CSS file.
When I started coding, I preferred this method simply because it had fewer code lines and was easier for me to understand. Now that I understand the search engine optimisation benefits of using the <link> tag in my HTML and understand what all the lines of code are doing, I have become more used to importing Google fonts in my HTML. For a pro trick to get the best of both worlds, keep reading…
Where to find the code to import fonts in your CSS
You find the code to import your fonts into your CSS file almost exactly as with HTML. The only difference is that rather than selecting “link”, you select “@import”, as shown below:
Code to import Google fonts in CSS
As you are using a CSS stylesheet, you need to refer to this in your HTML document and ensure that your CSS file is connected to your HTML document. If you are unsure how to do this, you can read our article on How to connect your CSS file in your HTML document here.
Here is the HTML code to connect to your CSS file:
<!DOCTYPE html>
<html>
<head>
<title>How To use Google Fonts in HTML and CSS</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
</body>
</html>
In your CSS file, you need to use the code from Google and add your CSS styling to “activate” the imported font. Below is how your CSS code should look.
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
body{
font-family: "Roboto", sans-serif;
font-weight: 100;
font-size: 15px;
}
Bear in mind when we were selecting our styles, we only selected the style with a weight of 100. Even if you change the font-weight in the code above to 400, your font-weight will not increase as you do not have the resource (the 400-font weight) imported into your file.
Disadvantages of using the @import method with Google fonts
When you use the @import method in your CSS file, you are not getting the benefits of preloading or even preconnecting to the origin source, which may negatively impact your site’s performance.
Advantages of using the @import method with Google fonts
Using the @import method in your CSS file seems so much easier. The code is more readable, and there are fewer lines. As a beginner coder myself, I can relate and understand this reasoning. But this there a way to get the best of worlds. A world when you get the performance benefits of preloading and cleaner, friendlier looking code as a beginner. And I believe there is.
Using Google fonts in HTML and CSS
We will preload our CSS style sheet in the best of both worlds solution, making it immediately available to the browser. By preloading the stylesheet, the browser can immediately import the Google fonts, keeping friendlier code while getting the performance boost.
Below if the code example to use preload while importing Google fonts.
<!DOCTYPE html>
<html>
<head>
<title>How To use Google Fonts in HTML and CSS</title>
<!--- This line sets the CSS file to preload--->
<link rel="preload" href="style.css" as="style">
<!--- This line imports the CSS file as a style sheet --->
<link href="style.css" rel="stylesheet"/>
</head>
<body>
</body>
</html>
Conclusion
As with almost everything in coding, there is rarely only one way to do something. The important thing in coding is that you understand when doing something a certain way what the implications are – the pros and cons and that you can understand your solution for where you are in your journey.
Yes, it is great to follow best practices and make your sites 100% optimised, but if you can’t easily read or understand the code to achieve that, you could find yourself wasting time.
I hope this article inspired you to take that leap and start learning to code. Click Here to meet other new coders like you and join our community.
