How to Include Google Fonts in a Website

Google Fonts is a free and easy-to-use library that allows developers to integrate stylish typography into their websites. This guide will walk you through the steps to include Google Fonts in your website using different methods.

01. Search for Google Fonts

Visit Google Fonts and search for the font family you want to use. Click on the font name to explore its styles and variants.

There is an option to enter a testing text that will reflect in real-time using the selected font-family characters. This helps you visualize how the font will look before implementing it on your website.

02. Select Your Font Family

Once you find a font that suits your design, click on it to open the detailed view. Here, you can preview different styles, weights, and character sets.

03. Use Custom Search Options

Google Fonts provides filtering options such as category, language, and font properties. You can refine your search based on:

Serif, Sans-serif, Display, Handwriting, or Monospace categories
Font thickness, slant, and width
Language support

04. Select and Choose Font Weights

After selecting the font, click the "+ Select this style" button next to the font weights you want to include. This ensures you load only the required styles, optimizing performance.

05. Include Google Fonts in Your Website

Google Fonts provides two ways to integrate fonts into your website:

i) Using the <link> Tag

Add the following code inside the <head> section of your HTML file:

<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

link-to-import-font-family-in-html-document

ii) Using @import in CSS

Add this inside your CSS file at the top:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

link-to-import-font-family-in-css-document

06. Apply the Font to Website Elements

After including the font, you can apply it using CSS:

body {
    font-family: 'Poppins', sans-serif;
}

You can also apply it to specific elements:

h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

07. Conclusion

Integrating Google Fonts into your website is simple and enhances the visual appeal of your content. Use the <link> method for HTML integration or @import for CSS-based styling. Ensure you only load the necessary font weights to optimize performance.

How To Include Google Fonts In Website