Font Styling and Web Fonts
Explore how to style fonts in CSS by using the font-family property, applying web-safe fonts, creating font stacks with fallbacks, and loading additional fonts like Google Fonts. This lesson helps you understand text stylization and ensures your web pages look consistent across devices.
We'll cover the following...
There are many CSS properties we can use on text-based elements to give the text different stylizations.
Changing font styles
You can change the font of your text using the font-family property.
If a font name contains spaces, then it must be wrapped in quotation marks (e.g. "Times New Roman") in order to be rendered properly.
Web-safe fonts
When a browser loads a web page, it will apply the font specified in font-family only if the font is loaded on the system. What do we mean by this? Running the same web page on a Windows desktop, an Android mobile device, or a Mac OS X laptop may yield different results because each platform has a different set of fonts loaded by default.
One way around this is to use web-safe fonts. Web-safe fonts are a set of fonts which are consistent across platforms, meaning you can expect to achieve the same result no matter what device your user is on. Common fonts that are safe across most platforms include:
- Arial
- Times/Times New Roman
- Helvetica
- Courier New/Courier
- Verdana
- Georgia
Font stacking
Say we want to use a font that isn’t available on every system. The font-family property accepts multiple font names, separated by commas.
p {
font-family: "Helvetica Neue", Helvetica, sans-serif;
}
This list of fonts is referred to as a font stack. CSS will apply fonts by priority in the font stack. If the first font is not available, it will drop down to the next font in the stack until it finds one it can apply.
It is best practice to specify fonts from the one you most desire to a generic one supported by all systems. In the example above, the last font listed is referred to as a generic-family font.
You should always end your font-family font stack with a generic-family font so that the browser has a fallback that matches the general style you want your font to be.
Loading additional fonts
If you are not satisfied with being restricted to web-safe fonts, it is indeed possible to load additional fonts when a browser downloads your web page. Google Fonts allows you to load additional fonts by embedding a CSS stylesheet in the <head> element.
There are other paid font services you can use, such as Typekit, Fonts.com, and TypeNetwork. Depending on your design needs, these may be of interest. However, Google Fonts provides a broad variety of font styles that are all free.
It should be noted that the more fonts you decide to add to your web page, the slower your page will load. Additional fonts should be used judiciously to ensure your user’s experience isn’t compromised.
Exercise
Lobster Two, a cursive font, has been loaded into the web page below using a <link> element. Use the font-family property to apply this font to both HTML text elements. Make sure you include a fallback option in case the font does not load properly.