Skip to main content

Integrating Google Fonts

Up until now, we've focused on web-safe fonts (fonts assumed to be installed on the user's computer). However, most modern designs require unique, custom typography.

Google Fonts is the easiest and most popular service for integrating thousands of high-quality, free, custom fonts onto your website. These are called Web Fonts.

The process requires three simple steps: Select, Link/Import, and Apply.


Step 1: Selecting the Font​

Navigate to the Google Fonts website and choose the desired font (e.g., Roboto or Poppins).

  1. Select Styles: Find the font you want to use. You must select every weight and style you intend to use (e.g., Regular 400, Bold 700, Italic 400).
  2. Generate Embed Code: Google will generate the code snippet necessary to load these styles.

Step 2: Linking or Importing the Font​

There are two primary ways to load the font files from Google's servers into your project.

This is the fastest and most efficient method. You place the generated <link> tags inside the <head> section of your HTML document.

index.html
<head>
  <meta charset="UTF-8">
  <title>Google Fonts Demo</title>

  <link rel="preconnect" href="[https://fonts.googleapis.com](https://fonts.googleapis.com)">
  <link rel="preconnect" href="[https://fonts.gstatic.com](https://fonts.gstatic.com)" crossorigin>
  <link href="[https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap](https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap)" rel="stylesheet">
  
  <link rel="stylesheet" href="styles.css">
</head>
  • wght@400;700: This URL parameter ensures only the Regular (400) and Bold (700) font weights are downloaded, keeping the file size small.

Method B: Importing via CSS (@import)​

You can place the @import rule at the very top of your primary CSS file, before any other styles.

styles.css

/* Must be the very first line of code! */
@import url('[https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap](https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap)');

/* All your CSS rules follow */
body {
  margin: 0;
}
Linking vs. Importing

Linking (HTML) is generally preferred because it allows the browser to download the font file concurrently with your main CSS, improving initial page load time.


Step 3: Applying the Font with font-family​

Once the font is linked/imported, you can use the specified font name in your CSS font-family declaration, just as you would any other font.

You must still include a fallback stack ending in a generic font family.

/* Apply Roboto to the entire body */
body {
  /* Roboto is the primary choice */
  font-family: 'Roboto', Arial, sans-serif; 
}

/* Apply a different font (e.g., Poppins) to headings */
h1, h2 {
  /* Poppins is the primary choice */
  font-family: 'Poppins', serif;
  font-weight: 700; /* Must use the weight you specifically linked/imported */
}

Interactive Google Fonts Demo​

Since we cannot link to external files in a live MDX block, this demo simulates the final step (Step 3) where the font is applied using the name provided by the Google Fonts service.