Check out a free preview of the full CSS In-Depth, v2 course:
The "Fonts, Icons & Subsetting" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle shows how to make icons accessible with fallback text. Putting your font through Font Squirrel, Estelle demonstrates how to use the expert settings to subset the fonts.

Get Unlimited Access Now

Transcript from the "Fonts, Icons & Subsetting" Lesson

[00:00:00]
>> Estelle Weyl: So let's talk a little bit about fonts. We talked the other day about material icons as generated content or actually no just as a font which uses ligature. And we talked a little bit about using generated content and making it accessible. And that this is really cool in a way of doing icons that are legible.

[00:00:24] The only thing is what does this little bug mean, probably an Android and a count circle, or a count box. I'm gonna check my code because I'm wondering if I actually put titles on this if they actually show up.
>> Estelle Weyl: Yeah, I put a title on it, that's why it's showing up.

[00:00:47]
>> Estelle Weyl: So, you saw how I hovered over it, so I'm just gonna do a View Source, View, Developer, View Source and just see if the JavaScript did it or if I did it. Yeah, each one has a title. So, I actually made it accessible, that is the correct way to do it if you're gonna use these, put a title on it.

[00:01:03] But this is much better than just using icon fonts that don't actually have ligatures or text underneath it, because it's not accessible. The thing is this had several thousand icons, and do I really wanna download all of these icons as all I'm gonna use is the trending up icon.

[00:01:26] Probably not, so let's just actually put,
>> Estelle Weyl: Trending up.
>> Estelle Weyl: No, doesn't work, okay. Let's put trending up right here.
>> Estelle Weyl: And there we have that icon, so just show that it works. But sometimes when you are including fonts, you only want to include the characters that you're gonna use.

[00:01:58] So you can use sub-setting, so you can take your font. Put it through FONT SQUIRREL, and under here it says EXPERT. Can you guys read that? Yes you can. So it says EXPERT. And then here it says Custom Subsetting. And you can use just the numbers, and I'll say 0 through 9, and then single characters, I'm just gonna put the ampersand.

[00:02:26] And it will generate a font for you, that only has those characters. So then you have a tiny little font, and you can probably actually for something this small, you could probably use it as a data URI. And then you just hit yes, I'm allowed to create fonts with this and it will produce the font for you, the font files, the woff files for you by default and then it will give you some script.

[00:02:55] So to actually use CSS with it here, I basically created a font, I said my font woff2 and then I did a fallback for those that don't understand woff2 and use woff. Font-weight normal, font-style normal, and then I gave it a Unicode-range, U+26 is just the ampersand, a lot of times your designers just want an ampersand that looks good.

[00:03:21]
>> Estelle Weyl: This is a one way of having a family that is just one character.
>> Estelle Weyl: You can also, if you're using Google font, you can call just a few characters and this is what I did, I did here on this one if you see, I'm using the Rye font or sans-serif, but let's just use, Helvetica or Georgia, I like Georgia as a font, right.

[00:03:50] So you saw that I'm changing the font but some of the letters, only vowels except from y, cuz y is always sometimes vowel. Because I said, text =AEIOU, both uppercase and lowercase. Now, when you call this right here. If you actually, I'm gonna open this up, go to my inspector, go to my network,

[00:04:16]
>> Estelle Weyl: Or, actually reload the page.
>> Estelle Weyl: And it will have called this CSS file.
>> Estelle Weyl: Where is it?
>> Estelle Weyl: I just, here's CSS
>> Estelle Weyl: Okay, well, usually it does it. Instead of doing a separate call, you'll actually find that,
>> Estelle Weyl: What's happening?
>> Estelle Weyl: Okay here it is. It basically produces something like this.

[00:05:08] Instead of calling it a link and doing all of this, just look at what that CSS response gave you. And put that into your CSS file and then you can do one fewer HTTP requests. You're still calling the external font from Google, but you're not doing an HTTP request for cuz you do the link for rough style sheet and you grab the five lines of code.

[00:05:32] One HTTP request for five lines of code, and then that in turn goes and finds the font for you, save that one, return and do that. Okay, so that's just a few ways of improving your fonts.