How to Import Google Fonts in CSS

1. Using the @import Rule to Import the Google Fonts in CSS
2. Using the link Tag to Import the Google Fonts in CSS

In this tutorial, we will learn some methods to import google fonts in CSS.

Using the @import Rule to Import the Google Fonts 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;
}

Using the link Tag to Import the Google Fonts in CSS

The link tag is the most appropriate way to import google fonts in HTML. The link tag is encouraged because it pre-loads the font.

We can specify the font URL in the href attribute of the link tag. We can generate all the link tags from the Google Fonts website.

For example, go to the Google Fonts website and choose the Comforter Brush font. Select the link radio button and copy the link tags generated.

Then, paste the tags in HTML and create a p tag and write some text inside it. Next, select the p tag in CSS and set the font-family property to Comforter Brush.

We have used preconnect for the rel attribute in the first two link tags. It lets the browser know that the user needs the resources in the href attribute so that the browser can initiate a preemptive connection to the resources.

In this way, we can use the link tag to import the google fonts in CSS.

Example Code:

<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=Comforter+Brush&display=swap" rel="stylesheet"> 

<p>Comforter Brush font.</p>

p {
 font-family: 'Comforter Brush', cursive;
}