I’ll introduce how to fix issues when Google Fonts are not loading or not applying properly.

Background: Google Fonts Not Loading or Not Applying?

Google Fonts Troubleshooting

Solution) Google Fonts Not Loading

When Google Fonts hosted on the server cannot be loaded even when specified with the link tag, first check if the URL set in the href attribute is correct.

For example, the correct domain name for Google Fonts hosting is fonts.googleapis.com, but if you accidentally define it as fonts.googleapi.com (missing the “s” due to a typo), the stylesheet won’t load properly.

✅ Correct URL

<link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">

❌ Incorrect URL

<link href="https://fonts.googleapi.com/css2?family=Montserrat" rel="stylesheet">

Solution) Google Fonts Not Applying

If you don’t load all the font-style and font-weight values you want to use, the fonts won’t be applied correctly.

For example, let’s say you have defined the following CSS:

.font-bold {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: bold;
}

With only family=Montserrat, only the Regular font is loaded, so even if you specify font-weight: bold;, it won’t be applied correctly.

<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

To reiterate, by specifying and loading all the font-style and font-weight values you’ll use as shown below, font-weight: bold; will be applied correctly.

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

That’s all from the Gemba.