Pixel To Presence

In short

CSS fonts control the typeface, size, weight and style of text. Learn font-family and font stacks, font-size, font-weight, and how to use Google Fonts. font-family and font stacks The font-family property chooses the typeface. You usually give a list of fonts, separated by commas.

CSS fonts control the typeface, size, weight and style of text. Learn font-family and font stacks, font-size, font-weight, and how to use Google Fonts.

font-family and font stacks

The font-family property chooses the typeface. You usually give a list of fonts, separated by commas. This list is called a font stack. The browser uses the first font that is available on the user's device.

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

The browser tries "Segoe UI" first (common on Windows). If it isn't there, it tries Helvetica (common on Mac), then Arial. If none are available, it uses any sans-serif font. Put quotes around font names that contain spaces.

Generic font families

The last item in a font stack should always be a generic family: a category that every browser understands. It is your safety net.

Generic family	What it looks like	Good for
`serif`	Small "feet" on letters, like Times New Roman	Classic, book-like designs
`sans-serif`	Clean letters without feet, like Arial	Most websites and apps
`monospace`	Every letter has the same width, like Courier	Code
`cursive`	Handwriting style	Decoration only
`system-ui`	The default font of the user's operating system	Apps and interfaces

font-size, font-weight and font-style

font-size sets how big the text is. The browser default is usually 16px. For now, px is fine; in the CSS Units lesson you will learn why rem is often a better choice.

font-weight sets how thick the letters are. You can use normal, bold, or numbers from 100 (thin) to 900 (very thick). 400 is normal and 700 is bold.

font-style makes text italic with font-style: italic; or normal again with normal.

<article class="post">
  <h2>Five Tips for Better Sleep</h2>
  <p class="intro">Small changes can make a big difference.</p>
  <p>Go to bed at the same time every day, even on weekends.</p>
</article>

.post {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
}

.post h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 32px;
  font-weight: 800;
}

.intro {
  font-style: italic;
}

The article text uses a classic serif font, the heading uses a heavy sans-serif font, and the intro line is italic. Mixing one serif and one sans-serif font is a common and safe design choice.

Note: A font only shows the weights it actually has. If a font has no 300 weight, the browser picks the closest one, so you may not see a change.

How to use Google Fonts

Google Fonts is a free library of over 1,500 fonts you can use on any website. Here's how to add one:

Go to fonts.google.com and choose a font, for example "Poppins".
Click Get font, then Get embed code.
Choose the weights you need (for example 400 and 700). Fewer weights load faster.
Copy the <link> tags into the <head> of your HTML, before your own stylesheet.
Use the font name in your CSS.

<head>
  <meta charset="UTF-8">
  <title>My Portfolio</title>
  <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=Poppins:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
</head>

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

h1 {
  font-weight: 700;
}

Your whole page now uses Poppins. The preconnect lines help the font load faster, and display=swap shows a fallback font right away so the text is never invisible while Poppins downloads. Arial and sans-serif are still in the stack, just in case.

Common mistake: Forgetting the quotes or spelling the name differently. The name in your CSS must match the Google Fonts name exactly, like "Open Sans", not OpenSans.

The system font stack

Sometimes the best font is the one already on the user's device. A system font stack uses the operating system's own font: San Francisco on Apple devices, Segoe UI on Windows, Roboto on Android. It looks native, and it loads instantly because nothing is downloaded.

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Practice exercise

Pick two fonts from Google Fonts: one for headings and one for body text (for example "Playfair Display" and "Inter"). Add them to a page with a heading and a few paragraphs. Make the heading weight 700 and the body text 18px. Then try swapping in the system font stack and compare.

Hint: you can request two fonts in one link. Google Fonts builds this link for you when you select both fonts before clicking "Get embed code".

Key takeaways

font-family takes a font stack; the browser uses the first available font.
Always end a font stack with a generic family like sans-serif or serif.
font-size, font-weight and font-style control size, thickness and italics.
Add Google Fonts with a <link> tag in the <head>, then use the exact font name in CSS.
A system font stack looks native and loads instantly.

CSS Fonts: font-family, Font Size and Google Fonts