In the first article of the module, we explored the basic CSS features available for styling fonts and text. In this article we will go further, exploring web fonts in detail. We'll see how to use custom fonts with your web page to allow for more varied, custom text styling.Prerequisites: Structuring content with HTML, CSS Styling basics, Fundamental text and font styling. Objective: @font-face at-rule, and common descriptors.font-family property.
As we looked at in Fundamental text and font styling, the fonts applied to your HTML can be controlled using the font-family property. This takes one or more font family names. When displaying a webpage, a browser will travel down a list of font-family values until it finds a font available on the system it is running on:
p {
font-family: "Helvetica", "Trebuchet MS", "Verdana", sans-serif;
}This system works well, but traditionally web developers' font choices were limited. There are only a handful of fonts that you can guarantee to be available across all common systems — the so-called Web-safe fonts. You can use the font stack to specify preferred fonts, followed by web-safe alternatives, followed by the default system font. However, this increases your workload because of the testing required to make sure that your designs work with each font.
There is an alternative that works well. CSS allows you to specify font files, available on the web, to be downloaded along with your website as it's accessed. This means that any browser supporting this CSS feature can display the fonts you've specifically chosen. Amazing! The syntax required looks something like this:
First of all, you have a @font-face ruleset at the start of the CSS, which specifies the font file(s) to download:
@font-face {
font-family: "myFont";
src: url("myFont.woff2");
}Below this you use the font family name specified inside @font-face to apply your custom font to anything you like, as normal:
html {
font-family: "myFont", "Bitstream Vera Serif", serif;
}The syntax does get a bit more complex than this. We'll go into more detail below.
Here are some important things to bear in mind about web fonts:
You can use the Firefox Font Editor to investigate and manipulate the fonts in use on your page, whether they are web fonts or not.
With this in mind, let's build up a basic web font example from first principles. You should use the web-font-start.html and web-font-start.css files as a starting point to add your code to (see the live example). Make a copy of these files in a new directory on your computer now. In the web-font-start.css file, you'll find some minimal CSS to deal with the basic layout and typesetting of the example.
For this example, we'll use two web fonts: one for the headings and one for the body text. To start with, we need to find the font files that contain the fonts. Fonts are created by font foundries and are stored in different file formats. There are generally three types of sites where you can obtain fonts:
Let's find some fonts! Go to Font Squirrel and choose two fonts: a nice interesting font for the headings (maybe a nice display or slab serif font), and a slightly less flashy and more readable font for the paragraphs. When you've found a font, press the download button and save the file inside the same directory as the HTML and CSS files you saved earlier. It doesn't matter whether they are TTF (True Type Fonts) or OTF (Open Type Fonts).
Unzip the two font packages (Web fonts are usually distributed in ZIP files containing the font file(s) and licensing information). You may find multiple font files in the package — some fonts are distributed as a family with different variants available — for example, thin, medium, bold, italic, thin italic, etc. For this example, we just want you to concern yourself with a single font file for each choice.
Note: In Font Squirrel, under the "Find fonts" section in the right-hand column, you can click on the different tags and classifications to filter the displayed choices.
Now you'll need to generate the required code (and font formats). For each font, follow these steps:
After the ZIP file is downloaded, unzip it and move it into the same directory as your HTML and CSS.
Inside the unzipped directory, you'll see some useful items:
.woff, .woff2 files.stylesheet.css file, which contains the generated @font-face code you'll need.To implement these fonts in your demo, follow these steps:
Rename the unzipped directory to something easy and simple, like fonts.
Open up the stylesheet.css file and copy the two @font-face rulesets into your web-font-start.css file — you need to put them at the very top, before any of your CSS, as the fonts need to be imported before you can use them on your site.
Each of the url() functions points to a font file that we want to import into our CSS. We need to make sure the paths to the files are correct, so add fonts/ to the start of each path (adjust as necessary).
Now you can use these fonts in your font stacks, just like any web safe or default system font. For example:
@font-face {
font-family: "zantrokeregular";
src:
url("fonts/zantroke-webfont.woff2") format("woff2"),
url("fonts/zantroke-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}font-family: "zantrokeregular", serif;You should end up with a demo page with some nice fonts. Because different fonts are created at different sizes, you may have to adjust the size, spacing, etc., to improve the look and feel.
Note: If you have any problems getting this to work, feel free to compare your version to our finished files — see web-font-finished.html and web-font-finished.css. You can also download the code from GitHub or run the finished example live.
Online font services generally store and serve fonts for you, so you don't have to worry about writing the @font-face code. Instead, you generally just need to insert a simple line or two of code into your site to make everything work. Examples include Adobe Fonts and Cloud.typography. Most of these services are subscription-based, with the notable exception of Google Fonts, a useful free service, especially for rapid testing work and writing demos.
Most of these services are easy to use. Let's have a quick look at Google Fonts so you can get the idea. Again, use copies of web-font-start.html and web-font-start.css as your starting point.
<link> elements.<link> elements into the <head> of your HTML document, above any existing stylesheet links.font-family CSS rules and use them in your CSS to apply the fonts, in a similar way to the previous walkthrough.Note: You can find a completed version at google-font.html and google-font.css, if you need to check your work against ours (see it live).
Let's explore that @font-face syntax generated for you by Transfonter. The rulesets will look something like this:
@font-face {
font-family: "zantrokeregular";
src:
url("zantroke-webfont.woff2") format("woff2"),
url("zantroke-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}Let's go through it to see what it does:
font-family: This line specifies the name you want to refer to the font as. This can be anything you like as long as you use it consistently throughout your CSS.src: These lines specify the paths to the font files to be imported into your CSS (the url part), and the format of each font file (the format part). The latter part in each case is optional, but it is useful to declare because it allows browsers to determine which font they can use more quickly. Multiple declarations can be listed, separated by commas. Because the browser will search through them according to the rules of the cascade, it's best to state your preferred formats, like WOFF2, at the beginning.font-weight/font-style: These lines specify what weight the font has and whether it is italic or not. If you are importing multiple weights of the same font, you can specify what their weight/style is and then use different values of font-weight/font-style to choose between them, rather than having to give all the members of the font family different names. @font-face tip: define font-weight and font-style to keep your CSS simple by Roger Johansson shows what to do in more detail.font-display: This line specifies how the font is displayed while it is loading.Note: You can also specify particular font-variation-settings and font-stretch values for your web fonts. In newer browsers, you can also specify a unicode-range value, which is a specific range of characters you might want to use out of the web font. In supporting browsers, the font will only be downloaded if the page contains those specified characters, saving unnecessary downloads. Creating Custom Font Stacks with Unicode-Range by Drew McLellan provides some useful ideas on how to make use of this.
Now that you have worked through our articles on text styling fundamentals, it's time to test your comprehension with our challenge for the module: Typesetting a community school homepage.
Once you're done with the challenge, you can move on to learning about CSS layout.