CSS Fundamentals

Google Fonts

⏱ 7 min read📖 Beginner

Google Fonts is a free library of over a thousand beautiful fonts hosted by Google. Add a single link tag to your HTML and any font in the library is ready to use on your page — no downloading, no installing, nothing complicated.

Let me ask you something.

Have you ever looked at a website and thought the text just looks really good? Not the content, just the way the letters look. Clean, modern, designed.

That is almost always a Google Font.

Web safe fonts are fine but there are only about a dozen of them and most of them feel plain. Google Fonts gives you over a thousand beautiful free fonts that you can add to any project in about thirty seconds. No downloading, no installing, nothing complicated.

I use Google Fonts in almost every project I build. Let me show you exactly how it works.

What is Google Fonts

Google Fonts is a free library of fonts hosted by Google. Instead of the font living on your computer it lives on Google's servers. When someone opens your webpage their browser pulls the font directly from Google and displays it on the page.

That means it works for everyone who visits your site no matter what device or operating system they are on.

How to Add a Google Font

Go to fonts.google.com. You will see hundreds of fonts to browse through.

Click on any font you like. For our Netflix clone we are going to use a font called Bebas Neue. It is bold, strong, and cinematic — perfect for a streaming platform.

Once you click the font you will see a page with different styles. Click the Get Font button then click Get embed code.

Google will give you a link tag that looks like this:

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

Copy that and paste it inside the head section of your HTML file. It goes right above your style.css link.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Netflix Clone</title>
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

Now in your CSS you use it exactly like any other font family.

body {
  font-family: "Bebas Neue", sans-serif;
}

That is it. The font is now live on your page.

💡

Always put your Google Fonts link tag above your style.css link in the head. The browser loads files in order from top to bottom. If your CSS loads before the font is ready you might see a flash of the wrong font before it switches. Putting Google Fonts first avoids that.

Using Multiple Google Fonts

You are not limited to one font. Most real projects use two — one for headings and one for body text.

A classic combination that works beautifully is a bold display font for headings and a clean readable font for paragraphs.

Go back to Google Fonts, find Bebas Neue and also find Roboto. Select both and Google will give you one single link tag that loads them together.

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

Now use them in your CSS.

The headings now use Bebas Neue and everything else uses Roboto. Clean, intentional, and completely different from the default browser font.

💡

A good rule of thumb for font pairing is to use a display or decorative font for headings and a simple readable font for body text. Never use two decorative fonts together — it looks chaotic. One bold, one clean. That combination works almost every time.

Font Weights in Google Fonts

When you pick a font on Google Fonts you will notice it comes in different weights — 300, 400, 500, 700, 900. These are how thin or bold the font is.

400 is normal. 700 is bold. 300 is light.

If you want to use a specific weight you need to select it on Google Fonts before copying the link. Otherwise the browser will only load the default weight and your bold or light styles will not work.

Look at the link tag we used for Roboto earlier:

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

That wght@400;700 part means we are loading both the regular weight and the bold weight. If we only loaded 400 and then tried to use font-weight: bold in our CSS nothing would happen.

💡

Only load the font weights you actually need. Every weight you add is an extra file the browser has to download. Loading all nine weights of a font when you only use two of them slows your page down for no reason.

Building the Netflix Clone

Let us update our Netflix clone with proper Google Fonts. This is going to make a noticeable difference.

The Google Fonts link goes in the head of your HTML above your stylesheet link. Then you use the fonts in CSS exactly as you have been.

The headings now have that bold cinematic Bebas Neue look and the paragraphs use clean readable Roboto. The page is starting to feel like a real product.

In the next lesson I am going to show you how to control font size, font weight, and all the other text properties that make your typography feel polished and intentional. Come on in.

Learn about Typography →

Have anything to say about this lesson?

Your feedback helps improve these tutorials. If something was confusing or missing, let us know.