Font Family

In the last lesson you learned about px vs rem vs em. That lesson was about the size of your text. Now let’s look at the shape of your text. That shape is the font.

🔤 What is font-family?

Look at any app on your phone. The words have a certain look. Some letters are round and smooth. Some are sharp and plain. That look comes from the font.

The CSS property that picks the font is font-family. It tells the browser which font to use for your text.

Here is a quick way to picture it. Think of handwriting. The word “Hello” looks one way when Alex writes it and another way when Riya writes it. Same word, different style. A font is just a style of writing for the computer. So font-family is you telling the browser “use this writing style, please”.

🤔 Why do we need it?

By default the browser picks a font for you. It works, but it is plain. It may not match the feeling you want for your site.

Here is the real problem. Maybe you are building a fun kids page, but the default font looks like a boring bank letter. Or you are building a clean business site, but the font looks too playful. The font sets the mood of your page. So you want control over it.

font-family gives you that control. With it you can:

• Make your site look friendly, serious, modern, or classic.
• Match your text to your brand, like the way Netflix or YouTube text has its own look.
• Keep the reading easy and comfortable for the eye.

✍️ The syntax

You write font-family and then the name of the font you want. This rule sets the font for the whole page body.

body {
  font-family: Arial;
}

That says “use Arial for the text in the body”. Simple, right?

But there is one catch. The font you ask for might not be on the reader’s computer. Different phones and laptops come with different fonts. If the font is missing, your text drops back to the plain default and your design looks wrong.

So we give the browser a list. This is called a font stack. A font stack is just a backup list of fonts. The browser tries the first one. If it is missing, it tries the next one, and so on.

This rule gives the browser three choices, from best to safest.

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

Let’s walk through that line:

• The browser tries Arial first.
• If Arial is missing, it tries Helvetica next.
• If both are gone, it uses sans-serif. That is a generic family. A generic family is not one exact font. It is a category, so the browser will always find something that fits.

🧩 Serif vs sans-serif

You will hear these two words a lot, so let’s make them clear.

A serif is a tiny line or foot at the end of a letter. Think of the small feet on the letters in a printed newspaper or a book. Fonts with these feet are called serif fonts, like Times New Roman.

Sans means “without” in French. So sans-serif means “without the feet”. These letters are clean and plain, like Arial. Most websites and apps use sans-serif because it reads well on screens.

There is one more common type. A monospace font gives every letter the same width. This is the font you see in code editors, where each letter lines up neatly.

This table sums up the three generic families and where each one fits.

💻 A real example

Let’s style a small page. We give the headings one font and the normal text another. This is very common on real sites.

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

h1 {
  font-family: Georgia, "Times New Roman", serif;
}

code {
  font-family: "Courier New", monospace;
}

Notice one thing. "Times New Roman" and "Courier New" sit inside quotes. That is because their names have spaces in them. Wrap any font name that has a space in quotes, so the browser reads it as one name.

⚠️ Common mistakes

A few small things trip up beginners. Watch out for these.

• Forgetting the generic family at the end. Without it, a missing font leaves you with no safe fallback. A fallback is the next font the browser uses when the one you asked for is not there.
• Not using quotes around names with spaces. font-family: Times New Roman; is wrong. Write font-family: "Times New Roman";.
• Spelling the font name wrong. The browser does not guess. If you type Ariel instead of Arial, it just skips it.
• Listing only one rare font and no backups. If that font is missing, the reader sees the plain default and your design is gone.

✅ Best practices

Keep these simple habits and your fonts will always look right.

• Always give a font stack, not a single font. List a few good options, then a generic family last.
• Use sans-serif for body text on most websites. It is easy to read on screens.
• Group your fonts by feeling. Pick similar-looking fonts, so if one drops back to the next, the change is small.
• Keep it to one or two fonts per site. Too many fonts make a page look messy.

🧩 What You’ve Learned

You just learned how to control the look of your text. Here is the quick recap.

• ✅ font-family sets which font your text uses.
• ✅ A font stack is a backup list. The browser tries each font in order until one works.
• ✅ Always end the list with a generic family like sans-serif or serif.
• ✅ Serif fonts have small feet, sans-serif are clean and plain, and monospace gives every letter equal width.
• ✅ Wrap any font name that has spaces in quotes, like "Times New Roman".

🚀 What’s Next?

Now you can choose the right font. Next you will learn how to control how big or small that text appears.

Font Size