How to Add Google Fonts Using CSS

Google Fonts offers a wide range of fonts that you can easily integrate into your website. This guide will walk you through how to add Google Fonts to your site using CSS.

Step 1: Choose Your Font from Google Fonts

Visit Google Fonts and browse the available fonts. Once you find a font you like (for example, Roboto, Lobster, or Open Sans), click on it and select the styles you want to use.

Google Fonts will provide you with the necessary embed code, either an @import statement or a <link> tag.

Step 2: Add the Font to Your Website

You can include the selected font in your site using the following method.

Using @import in custom CSS

Go to System > Modules > Custom CSS and add this at the top:

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

Step 3: Apply the Font in CSS

Once you've loaded the font, apply it to your elements using the font-family property in your CSS. Below are a few examples:

Example 1: Apply Roboto font to the entire page

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

Example 2: Use Lobster for headings only

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

h1, h2, h3 {
  font-family: 'Lobster', cursive;
}

Example 3: Set Open Sans for paragraph text

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

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

Tips

• Always provide fallback fonts (like sans-serif, serif, or cursive) in case the Google Font fails to load.

• You can include multiple fonts by chaining multiple font families in a single import or link.

• For performance, use only the weights and styles you actually need.