Web Fonts
As we learned in the chapter about basic CSS properties, the font-family property can be used to select typefaces for a webpage based on the fonts installed on the users computer. However, the world of web fonts allows us to have far more control and wider selection of typefaces for use in our designs.
Web Font Basics
To recap what we've already learned, typefaces can be applied to any HTML element (or other selector) using the font-family CSS property. A series of font options are given as a value, e.g. "Times New Roman", Georgia, serif. The browser looks on the user's computer to see if each font is available, from left to right. If the first font isn't installed (Times New Roman), the browser moves on to the next one (Georgia), and then on to the next, through as many font options are provided. It's standard practice to provide a generic option (serif or sans-serif) as the last in the series so that the browser can use the system default if none of the specified fonts are available.
Traditional use of the font-family property looks for fonts installed on the user's computer.
The reason the web has traditionally relied on system fonts—those installed on the user's computer—rather than providing custom fonts along with the other website files is that fonts are intellectual property. If a font is downloadable by the browser, it's easy for a user to keep the font without paying for it, which is both illegal and harmful to font creators. For decades, this limitation meant that only a handful of "web-safe" fonts—those commonly found pre-installed on most operating systems—could be used to style websites.
Web Font Services
Luckily for us, advances in technology and business models have created a new golden age of web typography through the advent of web font services. These are services that provide licensed and hosted web fonts that can be used legally and safely to style a site. Some of the most common web font services include Google Fonts (which has the added advantage of being completely free), Adobe Fonts, and Fonts.com, but there are countless others.
Web font services provide access to libraries of licensed typefaces for legal use on websites.
These services provide the site developer with short snippet of embed code to be placed in either the site's CSS or the head of each HTML file. The font can then be applied normally using the font-family CSS property. It's still a good idea to provide fallback fonts, just in case anything goes wrong with the web font.
What happens if you remove the Google Fonts embed code? Do you think the font will change?
Weights & Styles
Not every typeface has italic styles or bold weights. Some typefaces only have a single variation, while others have several weights, from ultra-light to ultra-black, and an italic style for every weight. When choosing fonts from a webfont provider, it's important to make sure to choose typefaces that include the weights and styles you need for your design, and to mark those weights and styles for inclusion in your selection.
The flip-side of this is that every weight and style that is downloaded by the browser from a webfont provider adds to the overall load time of the web page, and including too many typefaces with too many weights and styles can slow the loading of a page down significantly. Because of this, it's important to be judicious and only include weights and styles that are absolutely necessary to the design. Every webfont service has a different interface for choosing weights and styles, but some of the better ones include an indicator to show you how much of an impact the fonts will have on the load time of the page.
When selecting webfonts, choosing which weights and styles to include is super important.
Fake Bold and Fake Italic
Another factor to bear in mind is that some elements have weights or styles applied to them by the browser's default CSS, such as the bold applied to headings by default or the italics applied to the em element. If you load a webfont that lacks a bold style and use it on an element that is bolded by either default styles or your CSS, the browser will attempt to fake a bold style by simply making the available weight thicker. Similarly, if there is no italic style available for an element that is italicized by default or by your CSS, the browser will attempt to fake it by tilting the letterforms.
Fake bold or italic is a typographic crime and should never be allowed to happen.
To avoid fake bold and italic, you can either ensure that the needed weights or styles are included for whatever typeface you use. Or you can manually set the weight (using font-weight) and / or style (using font-style) in the CSS to match what is available for the typeface.
Practice Exercise
Resource Links
- A Practical Look at Choosing Typefaces
- Typ.io: Webfont inspiration
- Google Font type inspiration
- Canva Font Combinations inspiration