New Feature: Playlist Center! Pick a topic and let our playlists guide the way—like a learning mixtape.

Start learning with our library of video tutorials taught by experts. Get started

Deploying Icon Fonts for the Web
Illustration by
Watching:

@font-face syntax


From:

Deploying Icon Fonts for the Web

with James Williamson

Video: @font-face syntax

Keep in mind that icon fonts are just that.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Deploying Icon Fonts for the Web
2h 4m Intermediate Apr 29, 2014

Viewers: in countries Watching now:

Icon fonts are a fast, effective way to feature scalable vector artwork on websites. James Williamson shows you how to properly deploy icon fonts on your own site in this short course. Learn how to find an icon font that's right for you and style it so it appears exactly the way you want. Then learn about deployment options that will make your icons accessible and display consistently across multiple browsers and devices. James also introduces advanced styling options such as animated and multicolored glyphs.

Want to create your own icon fonts? Check out James' companion course, Creating Icon Fonts for the Web.

Topics include:
  • 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
Subjects:
Web Web Graphics Interaction Design Web Design
Author:
James Williamson

@font-face syntax

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.

There are currently no FAQs about Deploying Icon Fonts for the Web.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Deploying Icon Fonts for the Web.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.