CSS Font Family

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

h1 {
  font-family: Georgia, serif;
}

Let me ask you something.

Have you ever opened two websites with the exact same content and one felt modern, clean and professional while the other felt outdated and cheap?

A lot of the time the difference is the font.

Fonts carry personality. The right font makes your page feel premium without changing a single word on it. The wrong font makes even good content feel untrustworthy. That is how powerful typography is.

And in CSS controlling fonts is incredibly simple. Let me show you.

What is Font Family

Font family is just the name of the typeface you want to use on your page. The font that all your text appears in.

In CSS you set it using the font-family property.

Every single element on the page now uses Arial. The heading, the paragraph, the buttons, everything. That is because we set it on the body and every element inside the body inherits it automatically.

Web Safe Fonts

Some fonts come pre-installed on almost every computer and device in the world. These are called web safe fonts. You can use them without doing anything special — they just work.

Here are the most common ones:

• Arial — clean, modern, sans-serif. Used everywhere.
• Georgia — elegant, slightly old school, serif.
• Times New Roman — very traditional, serif.
• Courier New — monospace, looks like code.
• Verdana — wide and easy to read on screens.
• Trebuchet MS — friendly and slightly rounded.

The page now uses Georgia. Notice how different it feels compared to Arial. Same words, completely different personality.

Web safe fonts are reliable but they are limited. There are only about a dozen of them. And honestly most of them feel a little plain for modern design. That is where Google Fonts comes in — but we will cover that in the next lesson.

Always Add a Fallback Font

Here is something important. What if a font fails to load or is not available on a user's device? The browser needs a backup plan.

That is why you always give CSS a list of fonts separated by commas. The browser tries the first one. If it cannot find it it tries the second. If that fails it falls back to the last one.

The browser first tries Arial. If Arial is not available it tries Helvetica. If that is also not available it uses whatever sans-serif font the device has built in.

That last fallback — sans-serif, serif, or monospace — is a generic category not a specific font. Every device in the world has at least one font in each category so it is your safety net. Always end your font list with one of these.

Font Family on Specific Elements

Sometimes you want a different font on your headings than on your body text. That is very common in real design — a decorative font for headings and a clean readable font for paragraphs.

The paragraphs use Arial from the body. The heading overrides it with Georgia. Two different fonts, working together on the same page.

This is a pattern you will use constantly. Set a base font on the body then override it for specific elements where you want something different.

Building the Netflix Clone

Let us add a font to our Netflix clone. Right now it is using whatever the browser default is. Let us make it intentional.

The Netflix logo stays red using the ID selector, the rest of the headings and paragraphs are white, and everything uses the same clean font throughout.