Join Laura Franz for an in-depth discussion in this video Applying web fonts in CSS with @font-face, part of Typography for Web Designers.
- View Offline
After we've downloaded the font files from fontsquirrel.com and put them into the fonts folder, we're ready to link the fonts to our web page with the advanced face syntax. In this lesson, you'll need the files love.html and love.css from the exercise folder. You'll also need the font files and the font- face kits you downloaded in the last lesson. Look at the HTML file in a browser and take a look at what we've got, six words. Three say love and three say hate.
Their set as headings, h1, h2, and h3, and I've already styled them in terms of size and weight in CSS. The first pair of words are already set using the @font-face syntax to link to web font files, but they aren't chilling up in the correct fonts. Why? Because our fonts folder is in the wrong place. It's on the Desktop and it needs to be in the exercise folder. So first let's move our fonts folder into our exercise folder. Now you can see we have our CSS file, our HTML file, and our fonts.
We can review it in the browser and now the fonts are working. Excellent! Now what we need to do is get the other two pairs of words working with that font-face. We're working with words that we sort of sketched out in the previous lesson. Here is a screenshot of how we want the words to look as well as the font we're using for each word pair. The second pair of words needs to be set in Gesso. We've already downloaded the font-face kit from Font Squirrel and put the fonts in the font folder.
We can see them here you'll see there are four versions of the Gesso font. EOT is used by Internet Explorer, SVG is used by iPhones and iPads, TTF is used by most other browsers, and WOFF is a compressed web font file and it's the emerging standard. So let's put the @font- face syntax into the CSS file. When you downloaded the @font- face kits on our Desktop here under Gesso-fontfacekit, it also gave us a CSS file for each font.
These files actually give us the syntax we need. Open that up in my text editor. And there is no reason to go in and type all this in to my current file. It's better to just copy it and paste it. So what does the syntax mean? @font-face is the selector. As with any selector, we're describing it within the curly brackets-- which I seem to have not copied that one there.
We've given it a property and we've said we're going to create a font-family called GessoRegular. Then we've included a command, a source command. This tells the browser to follow a URL or a path to a file. Here it's a web font file and it's the EOT file for Internet Explorer, but we've put the fonts in a Fonts folder. So we need to add fonts/ so the browser knows to go into the fonts folder to get that font.
If someone is using Internet Explorer 9, their browser will know to follow the URL or path into the fonts folder to get the EOT file. If someone is not using Internet Explorer 9, the browser will move on to the next source command. Here the browser has multiple options. Each one is separated by a comma and we need to add the fonts/ to each. The first option is for Internet Explorer 6 through 8. The second option is the emerging standard and the third option is for most other browsers.
Our final option, font/, is for iPhones and iPads. If you're interested in knowing more about why Internet Explorer needs its own source command or why we need to offer different paths for different versions, I highly recommend you read "The New Bulletproof Font-Face Syntax" at fontspring.com. When the source command is done it closes with the semicolon. The syntax tells the browsers the weight and style are normal and the property ends with the curly bracket.
So the @font-face syntax is in the CSS, but now we need to tell that h2 to use the font-family we've just created. We can go up and copy our font- family here. Scroll down to our h2. I could copy the whole line and add that in. We're going to create a font stack. A font stack offers the browser a second option, in case this font doesn't work.
We're going to go ahead and use Georgia. So that means that if the GessoRegular doesn't work, Georgia will come in for our font. We can go ahead and save this, and review it in the browser and it worked. We've just linked to our web font using the @font-face syntax. This is the method we'd use if we want to link to web fonts kept in a fonts folder with the rest of the web site files. It's not hard, but the syntax is a little tricky. Font Squirrel does a great job of providing the syntax for copying and pasting.
Do the last font on your own. When you're done we'll move onto the next chapter and look at how we use fonts and text.
- Understanding how good typography promotes reading
- Choosing web-safe fonts
- Applying web fonts in CSS with @font-face
- Adding and applying the Google Fonts syntax
- Finding and applying a good font size, line height, and line length
- Improving a color palette by improving contrast and reducing optical vibration
- Understanding how people mentally organize, or chunk, visual elements
- Applying a system of hierarchy in HTML and CSS
- Applying vertical spacing in CSS
- Adding emphasis within a heading
- Understanding classic and modernist typographic pages
- Adding a list of links
- Creating drop caps
- Fixing quotation marks, apostrophes, and dashes