Using web fonts
Converting, loading, registering and using web fonts
The way of kata
Kata is an exercise for muscle memory. It's not intended to fill your brain with information but train your fingers to react. The information is there to give you the why, but your fingers need to learn the how.
The material on this page is presented in a specific order — from least specific to highly technical. You will learn the most by jumping in as soon as you have some idea of what you should do. Once you're done, read the rest of the material and check your solution.
All katas are designed to be doable without using 3rd party libraries (and, in fact, the point is to also learn how to do what these libraries do).
To make the best of katas, observe the following rules.
- Don't rush.
- When stuck, take a break and do something unrelated.
- Do not copy/paste code. Always retype everything.
- Do not use AI tools to generate code.
- Try to do something that wasn't in the instructions, experiment.
- Repeat the kata from time to time, even if you think you've got it.
- You have mastered the kata once you are able to complete it without thinking too much.
Remember, the goal is not to get it done, but to get some practice.
Introduction
In this exercise you will practice the techniques for using web fonts on your page.
Skills you will acquire
- Font basics
- Converting TTF fonts into web fonts
- Adding web fonts to your page
- Applying web fonts
- Improving load performance
Objective
- Find one decorative and one sans-serif font for the page
- Convert a font into woff and woff2 format
- Register the webfont in the CSS
- Use prefetch to load the fonts files before CSS
- Use the network tab in the developer tools to analyze load performance
Check your solution
- The page has main heading that uses a decorative font
- The main heading font size is twice as large as the body text
- The subheading below the heading uses a bold version of the body text font
- The subheading is all-caps
- The subheading is 75% of the heading font size
- The body text uses a sans-serif font
- The WOFF2 format loads (not WOFF)
- The font files are loaded in parallel with the CSS and starts loading at about the same time CSS does
- The font sizes scale with the change in the default font size of the browser
Materials
Tools
Keep in mind
Although it is possible to include fonts directly from Google fonts, I recommend always shipping code from your own server or CDN. Over the years, Google font has been a subject of some controversy related to privacy and compliance, and, since serving fonts on your own infrastructure isn't any different from serving other assets, I believe it makes sense to take just a few additional steps to dodge any bullets.
You can, of course, use fonts that are not from Google Fonts. As with any piece of work not created by you, you will need to consult the licensing terms before you decide to include fonts. Even when you have purchased a font, remember that it may not be licensed for use on the web. Check before you use.
Typefaces — which is what we call the visual design people typically call "font" — consist of multiple separate fonts that share the same overall design language, but differ in style (normal, italics) and weight (light, thin, regular, medium, bold, black etc.). A collection of fonts for the same typeface is also called a family. When preparing fonts for the web, we typically don't use the entire family (which can be as many as 18 fonts!) as that would create an unreasonably large payload. We usually only use the parts of the family we need.
Before you can prepare the font, you will need to download the TTF version of the font. You can then use the Transfonter app to convert it. The default settings typically work well.
If you know ahead of time that you will not need all the languages in the font, and the font supports lots of languages, you can change the "Subsets" setting to include only the languages that you will use (for example, for English-only sites, you could only include the "Latin" subset). This reduces the size of the resulting files.
When converting fonts, you can convert all your fonts at a time. As long as the "Family support" option is on, Transfonter will group fonts belonging to the same family together.
By default, the generated bundle includes the converted font files in WOFF and
WOFF2 formats. These formats cover virtually all the current browsers, where the
WOFF format serves as a fallback for the browsers that don't support the newer
WOFF2 format. The later format compresses better. The bundle also include some
CSS that will register the fonts and make the browser download the associated
files. Retype the @font-face rules into your CSS files for each font (don't
copy).
I recommend placing the @font-face rules at the top. This keeps them out of
the way when you are reading the rest of the code.
When setting the base font of the page, use the body selector and set only the
font-family property. Never set the font-size property on the body or
html elements as that will override the user's browser settings. Furthermore,
never set font sizes in pixels. Always use %, em or rem units for font
sizes. Try specifying the font sizes using each of those three.
Test the font size styles by changing the default font size in your browser. Make sure that all text scales proportionately when the setting is changed. Test this on multiple different browsers.
Normally the font file(s) start loading when the CSS is parsed. To speed up the
loading process, we can use a preload <link> tag to let the browser know that
the font files should be loaded ahead of time. Try first loading the page
without the preload links, and then with the prefetch links. Use the Network tab
in the developer tools to analyze the difference.