Join James Williamson for an in-depth discussion in this video @font-face syntax, part of Deploying Icon Fonts for the Web.
Keep in mind that icon fonts are just that. They're fonts. So in order to get them to work on your site, you'll first need to treat them like any other web font. Well that makes reviewing the @font-face syntax a very useful place to start. Now the file I'm looking at right here is the syntax.htm. Which you can find in the chapter two 02_01 directory. I'm just looking at it in the browser. You can certainly open it up in your code editor of choice. Or follow along with me.
But honestly, I'm just sort of demoing this, so we're not going to be actually doing anything with this exercise file. So you don't necessarily need to open it up if you don't want to. So, I'm going to scroll down just a little bit because I have sort of an example, @font-face rule displayed here. So essentially, here's how it works. We use the @ font face rule. You do it @font face declaration. Open and close curly brackets. And then everything inside it goes into defining the font. Essentially, what you're doing here, is you're telling the browser to go out.
Request this resource. Which in this case is a font. And then use it to display the defined text on the page. So we have to do a couple things here. The first thing that we do is we give the font a name. Now normally when you're seeing the syntax, you're thinking of assigning a font to some text. But in this case, we're actually assigning a name to the font. So this name right here, font name, can be anything you want it to be. And most of the time you want to name it something short and clear that you're going to remember. Because that's the name that you're going to use In your CSS later on, when you're requesting this particular font.
Now the rest of this syntax, all of these sources and URLs, right here? These are the things that actually go out and request the fonts. I know it looks a little confusing. But the fact of the matter is, different browsers support different font formats. And so because of that, we have to serve up a bunch of 'em. Don't worry, I mean, this syntax is not going to cause your browser to download six different versions of the font. The syntax is written in such a way, so that each browser is only going to request the font that they need. Even a problem browser like Internet Explorer. We've got a little tweak to the syntax right here, this little query string.
It stops Internet Explorer in its tracks. It'll ignore the rest of the URL declarations. And only download what it needs. So, EOT stands for Embedded Open Type. That's typically what Internet Explorer is looking for. Although latest versions of Internet Explorer support more than that. Then we have woff, true type, those types of fonts are supported by Chrome, Safari, Firefox, those types of things. And then, finally, you'll see the SVG declaration down here. SVG is kind of a fall back font. It's typically used by mobile devices. And some older mobile devices only support SVG.
So it's nice to have there. Of course, in order to write this declaration, you actually have to have all these individual versions of the fonts. So, in a lot of ways, if you're not downloading your icon font from somebody else and you're creating it from scratch. You have to have a font generator that's going to give you all of these different versions of it. Finally these last two lines down here again in normal CSS, we're used to those actually setting, font weight and font style. But here what we're doing is we're basically declaring which version of the font this is. So in this case for normal, this would be the regular version of the font.
And if you declared the font name later on, and said you wanted the normal version 400 weight, font style normal. This is the font that would be used for it. I want to show you this actually working. And I'm going to scroll down and here it is actually working. When I say let's try it, display the home icon. We're using an icon font right there to do that. I'm going to go into the code editor and kind of show you what's going on. So here I am in the code editor. This is the base CSS for the example file that I was just showing you. I'm using more than one web font here, I'm also using lado because I really like it.
It's a great looking font. But if I scroll down through this, and it takes a while. I get to my custom icon font that I made, chunky mobile. So you'll notice that I'm giving it a font family name. And I like using either underscores or dashes. So that when I declare the font to a name later on in my CSS, I don't have to put quotation marks around it. And I can create, like, a fall back list if I want. So anyway, chunky_mobile. And then you can see the syntax exactly the way I had it in the example. The only difference is, the URL is pointing to a real font. And it's using a real relative path to that font.
That's the other thing I wanted to point out about the font face syntax. You have to use a relative path from the CSS, to the font in order for it to work. So how this actually declared in the page? Well if I go down to the HTML and I scroll down towards the bottom. You can see that I have this little span with the class of icon. And then I have the HTML entity that basically is the same as the glyph that I'm looking for. So this font was encoded using private use area encoding. And E000 is the hex value for that particular character encoding.
How do I know that? Well, I made the font. If I hadn't made it, I would've had to look at a little cheat sheet or something to know it. So, this is the HTML entity that allows me to specify private use area encoding. Really any character encoding, basically. And, I'm using the class icon to actually request the icon font. How does that work? Well, if I scroll up, I actually embedded this class into the HTML itself. So it wouldn't be quite hidden within all that base.CSS stuff. So essentially all I'm doing is for the class icon, and saying, hey font family, I want chunky mobile.
The one I just defined in my CSS. And then I'm giving it a font size of 1.4. So because I'm asking for Chunky Mobile and not Lato or some other font. I get my icon instead of a letter. Now depending on which icon font or service that you use, you might not have to worry about creating all of this font face syntax stuff. If you're creating your own font. Or downloading many of the open source options available, you might have to write the syntax yourself. So it's a really good idea to read up on exactly how this works, if you're not familiar with the @font-face syntax.
Want to create your own icon fonts? Check out James' companion course, Creating Icon Fonts for the Web.
- Finding icon fonts
- Ensuring consistent styling
- Exploring class-based solutions for deployment
- Deploying with the data-icon attribute
- Aligning icons
- Animating icons
- Styling multicolored glyphs