How to import Google Fonts to your CSS

Introduction

Fonts are important. Nobody wants every website to have the same default HTML font. That's why fonts exist. Google Fonts is one way to import cool fonts onto your CSS file. Let's go!

Using the @import rule in CSS

The CSS @import rule is used to import another stylesheet in a stylesheet. We can specify the stylesheet in the url() function and as a string.

We can also use the @import rule to import external fonts in CSS. For example, we can use the google fonts in the url() function and set the font with the font-family property. The Google Fonts has varieties of fonts from where we can choose. We can get the URL of the font from the website.

For example, go to the Google Fonts website and choose the Roboto font. Then, click on the @import radio button from the sidebar at the right.

Next, copy the URL between the style tag. Similarly In HTML, create the h1 and p tags. In CSS, write the @import rule at the top of the stylesheet and paste the Roboto font URL inside the url() function. Select the font Outfit and get the URL.

Next, select the h1 tag and use the font-family property to set the font Outfit. Likewise, set the font Roboto in the paragraph.

In this way, we can import google fonts in a stylesheet.

However, the use of the @import rule to import google fonts is discouraged. It is because the fonts will not show up on the webpage unless the file is fetched. Example Code:

<h1> Title </h1>
<p>This is Roboto font.</p>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit&display=swap');

h1 {
 font-family: 'Outfit', sans-serif;
}

p {
 font-family: 'Roboto', sans-serif;
}