Now that you know how to select the text you want to style with CSS, you're ready to start styling!
Today we're going to talk about how to use font families in CSS. The font-family declaration is how you set the fonts for the text on your page.
Here's an example of a CSS rule with a font family declaration:
h3 {
font-family: Georgia, Times, "Times New Roman", serif;
}
This font family declaration includes a font stack of web safe fonts. Let's talk about what those two terms mean.
The Font Stack
A "font stack" is a group of fonts that are fairly similar to each other and can stand in for each other. When the browser encounters a font-family declaration in your CSS, it starts with the first font and tries to match it. If the font is not available, it moves on to the next one. So, start your font stack with the font you really want to show, followed by the close second, on and on until you end the list with a generic font name like serif or sans-serif.
There are two ways a font can be "available" — it's either a "web safe" font that's already installed on your readers' computers/devices, or the font is loaded with your web page as a custom web font.
Web Safe Fonts
Web-safe fonts are fonts that just about everyone has on their computer or device. If you want to use a font stack of web safe fonts, check out CSS Font Stack, where you can copy pre-made font stacks of similar serif, sans serif, or monospace fonts (the "fantasy" and "script" offerings aren't quite as reliable, so skip those).
Using one of those font stacks, you can be reasonably sure that your readers will all have a similar reading experience on your blog.
The "web safe" fonts may seem a bit boring, but there are advantages to playing it safe. Web-safe fonts don't require any extra code, which makes them easier for you to implement. And, less code means quicker load times!
Custom Web Fonts
When web-safe fonts won't cut it, you can use a custom web font. There are tons of web font options available — Google Web Fonts alone has over 600 free fonts to choose from — and the design possibilities are endless.
Custom web fonts really shine when they're used instead of images for decorative text elements. Using a font instead of an image for decorative text improves the accessibility of your site — readers who use translation services to read your blog will be able to translate the text, and readers with visual impairments will be able to access your text.
Most web font services have comprehensive instructions for installing and using their fonts, so I won't get into installation details here (though I do have a tutorial on installing Google Web Fonts if you'd like to use them!). But, I am going to give you one tip that they don't always cover in web font documentation.
Building a Font Stack for a Custom Font
When you use a custom font, you should still build a font stack for it so that readers who can't (or just won't) load your custom font will have a reasonably stylish experience on your blog. Custom web fonts are fairly reliable, but sometimes the source file fails, or your reader has disabled JavaScript, or something else interferes and your reader can't see your custom font.
If you don't provide fallback fonts and your custom font fails for whatever reason, your readers will just see whatever their browser wants to show them as a default. Often, that's not pretty!
At the bare minimum, you should specify a generic fallback font for a custom web font, like serif or sans-serif. So, for example, if I wanted to use the lovely Google Web Font Josefin Slab, a minimal font stack would be:
h3 {
font-family: "Josefin Slab", serif;
}
I went with a serif fallback because Josefin Slab is a serif font. If I were using Josefin Sans, a sans serif, I'd choose sans-serif as my fallback.
If you've studied CSS fonts before you probably know that there are other generics, but serif and sans-serif are the most reliable. Fallbacks like "cursive" and "fantasy" often display as quirky fonts like Comic Sans or Impact, so it's best to stick with the classics.
I could improve this font stack by including fonts that are fairly similar to Josefin Slab and are commonly installed on PCs, Macs, and web-enabled devices. With a little bit of research, I was able to find Rockwell, a fairly common font that has similarities to Josefin Slab, and Courier New, an extremely common font that isn't quite as pretty as Josefin or Rockwell, but would do in a pinch.
h3 {
font-family: "Josefin Slab", Rockwell, "Courier New", serif;
}
Using that font stack, I know that most of my readers will see my custom font, but those who don't will see a reasonable substitute.
Try It Out!
I've put together a simple Codepen demo for you to play with. This demo includes two HTML elements: a heading and a paragraph. Each has a different font stack assigned to it.
Try changing the font families to web-safe fonts or fonts you have installed on your computer. If you really want to challenge yourself, try adding a custom web font (hint: you can use @font-face in Codepen)! If you'd like to share your experiment, "Fork" my Codepen to create your own and share the link in the comments below.
Want to get started? Click the "Edit on Codepen" link in the demo below or click here to open the Codepen editor in a new window/tab.
<h3>Change this font family!</h3>
<p>This paragraph could look nice with a different font family, too. Why don't you change it?</p>Check out this Pen!What's Next?
In part three, you'll learn how to use font-size, font-weight, font-style, and font-variant to fine-tune your new font's appearance. Move on to Blog Font Style with CSS - Size, Weight, and Style
