Google Fonts Library

Free CSS Developer Roadmap 2026 CSS roadmap for beginners Learn CSS step by step roadmap Responsive CSS learning path

A complete FREE CSS Developer Roadmap to master layouts, responsiveness, and animations.

Picture Google Fonts like a big repository of professionally designed fonts hosted on the internet. Instead of being limited to “common” fonts such as Arial or Times New Roman, you can now “check out” complete typefaces on the fly from Google‘s servers. Below is the simple, step-by-step way to get them into your CSS.

1. Pick Your Font

First, you go to Google Fonts. When you find a font you like, for example Roboto or Open Sans, you can choose the specific styles you need, such as Light, Bold, or Italic.

Once you have made your selection, Google will provide you with a bit of code. Consequently, you have two main options for including this in your project.

2. The Two Ways to Add Fonts

Option A: The HTML Link (Most Common)

You can simply add a <link> tag into your HTML file. Specifically, this line instructs the browser to fetch the font immediately. Think of it as saying, “Please ask for this font now before doing anything else.”

HTML

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Option B: The CSS @import

Alternatively, if you want to keep everything within your CSS file, you can import the font using the @import rule. However, you must ensure this remains at the very top of your .css file to work correctly.

CSS

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

3. Using the Font in CSS

After the font is linked or imported, the browser knows exactly what it is. Therefore, you must tell certain elements to use it by utilizing the font-family property:

CSS

body {
  /* First, use 'Roboto'. If it can't be found, use any 'sans-serif' font. */
  font-family: 'Roboto', sans-serif;
  font-weight: 400; /* Normal weight */
}

h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700; /* Bold weight */
}

Regarding your question, the best option is Option A (The HTML Link). The reason for this is that it allows the browser to load the font faster and more efficiently than the @import method.

Key Terms to Remember

Font Family: The name of the font, e.g. “Lato”. Always use double quotes if the typeface name contains a space.
Fallback Font: This is the backup font, such as sans-serif. In the event that Google Fonts is unable to load, the browser will load this instead.
Font Weights: These include styles like 400 (normal) or 700 (bold). During the selection process, please make sure you tick the boxes for the weights you want.

Why do we use Google Fonts?

Mainly, they offer incredible variety, allowing you to make your site look unique. Furthermore, the speed of Google‘s servers is excellent, and they offer great compatibility across all browsers.

Pro-Tip: Don‘t include every weight available. Because the more weights you add, the slower your site will load, you should choose only the ones you truly need.