CSS Fundamentals

CSS Fonts

⏱ 6 min read📖 Beginner

The font-family property controls which font appears on your page. You can use system fonts or load custom fonts from Google Fonts — for free.

Right now our Netflix page uses whatever default font the browser picks. That's fine, but it doesn't look like Netflix. Let's fix that.

font-family

The font-family property tells the browser which font to use for the text on your page. Here's the basic syntax:

body {
  font-family: Arial;
}

That one line changes the font for everything on the page. But what happens if the user's computer doesn't have Arial installed?

Fallback Fonts

You can give the browser a list of backup fonts to try. This is called a font stack. The browser reads the list left to right and uses the first one it finds.

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

Here the browser tries Bebas Neue first. If it's not available, it tries Arial. If that's not available either, it falls back to any sans-serif font the system has.

💡

Always end your font stack with a generic family — serif, sans-serif, or monospace. This guarantees something readable always shows up.

Google Fonts

Most custom fonts aren't installed on people's computers by default. Google Fonts lets you load any font for free over the internet.

Here's how to add the Bebas Neue font — it gives your heading a bold, cinematic look, similar to what Netflix uses.

Step 1 — add this <link> tag inside the <head> of your HTML, before your stylesheet:

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

Step 2 — use it in your CSS:

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

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

We're using two fonts here on purpose. Bebas Neue is bold and condensed — great for the big Netflix headline. Roboto is clean and readable — perfect for body text and paragraphs.

💡

Click Try It Yourself to see the font change. Notice how "Netflix" instantly looks more dramatic with Bebas Neue.

font-family for Different Elements

You don't have to use the same font for everything. A common pattern is to use a display font (like Bebas Neue) for headings only and a clean readable font for everything else:

/* Headings get the bold cinematic font */
h1, h2 {
  font-family: "Bebas Neue", Arial, sans-serif;
}

/* Body text stays clean and easy to read */
body {
  font-family: "Roboto", Arial, sans-serif;
}

💡

Put quotation marks around font names that have spaces in them — like "Bebas Neue" or "Times New Roman". Single-word fonts like Arial don't need quotes.

Next up: the font is set — now let's control the size, weight, and spacing of the text to make the Netflix hero look bold and cinematic.

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.