Join James Williamson for an in-depth discussion in this video Using Font Squirrel to generate fonts, part of Creating Icon Fonts for the Web.
The final thing that we need to do to get our icon font ready to use in our sites and our projects, is to generate the multiple font formats necessary for web fonts. To do that we're going to use Font Squirrel, because I gotta tell you, I don't know what I would do without Font Squirrel. This is an online service that hosts web fonts and you can download and use. And it also more importantly for us has a web font generator that makes the process of converting things like the single OTF font that we have into multiple font formats and it makes em so simple.
Alright, so let's take a look at how it works. The first thing I'm going to do, obviously you need to navigate the FontSquirrel.com. I'm going to click on the web font generator right there. It's going to load up this little application for us. And the first thing it's going to ask me to do is add a font. So I'm going to click here to add the font. I'm going to browse out to the 05_01 directory, in the chapter 5 exercise files folder. And I'm going to find that OTF file that we created earlier. I'm going to go ahead and open that up. It'll upload it to the web font generator and it gives you a nice little summary of it.
So we can see it's an open type font Has 105 list and it's about 13k, which is pretty small. Now as far as the settings, below this, there's going to be a whole bunch of settings that you can choose as long as you do experts. So I'm going to click on expert, because I'm going to show you all the things that you can do when you're generating your web fonts. Alright, I'm going to scroll down a little bit. And so the first thing we need to choose is what formats do we want. True type and EOT compressed are the default. Now, you may be asking why do we need so many different font formats. Well, for web fonts different browsers support different formats.
Now, those three are great, but I'm also going to add SVG so that we add a little bit of extra support for some mobile devices And we have a fallback if we need it in terms of having an SVG font. All right for a Treetype Hinting, I'm going to choose, Keep Existing. We didn't do any auto-hinting and since it's an icon font, it doesn't really need it. So by saying keep existing, I am in essence saying, I don't want any hinting at all. For rendering we got some things that can help the rendering look consistent across different browsers. I don't need to remove the kerning. Number one if I was doing a type font I'd probably want to keep it, but I don't have any kerning values, so I it wouldn't do me any good to strip them.
Now I'm not going to fix this little gasp table thing. I don't need to add that, but I am going to leave fix vertical metrics selected. And what that'll do for you, is there are different systems for determining vertical metrics in terms of the values of the senders, descenders. That helps normalize it across different devices and browsers, so that's a nice thing to select. The next thing we can do is we can insert any glyphs that might be missing. This is more handy if you're actually doing a typographer's font, and you didn't do certain hyphens, or spaces, and things like that.
We don't need them for the most part. I'm going to turn off hyphens, but I'm going to leave spaces. The reason for that is there are some spaces that are absolutely necessary for a font to have. I'm not 100% sure I have all of them. So I'm going to let font scroll do that for me. We added the not defined, the null character and we have the basic space character. But this is going to insert some extra spaces as well. Its not going to be that many may be five or six of them and its worth doing. For X height matching I'm not going to do any of that, that would resize the X height of your font so that it was consistent with other fonts like Arial or things like that.
This is an icon font so we don't need to worry about that. Let's scroll down down little bit more. We could enable the protection web only basically encapsulates the fonts into little bit of a rapport that gives a little bit of additional security makes it harder for people to use it on the desktop. This is going to be a free, open-sourced font, so I don't really care. As far as subsetting goes, I'm going to turn subsetting off. Subsetting allows you to say, hey I only really need these characters, and you can define your range for it if you'd like. I've seen a lot of people do this, I've seen a lot of people claim that it works, but I have never got it to work, I'm like the only guy that can't get this feature to work.
We don't need subsetting anyway, because we're using all of the icons in our font, we don't have any extraneous characters, so I'm going to say no. The next thing as for our CSS, I'm going to turn on base 64 encoding, with that, what it's going to do, is it's going to basically just data URI our font into the CSS, so the font itself will encoded in CSS. That's going to help with cross-domain font issues. That often plagues Mozilla so that's something you typically want turned on. We don't have multiple families here. We're not doing like bolds and blacks and thins and things like that so I don't need the style link and I'm just going to leave the CSS file name as style sheet dot CSS because we're just going to copy and paste from it so it doesn't need to be named anything else. We don't need to do any open type options because we don't have any advanced open type stuff here. I'd really don't want a suffix, so I'm going to remove that dash web font, the m square value I picked up correctly at 2048, I'm going to leave that, and I don't need to adjust the space and which is great. Those are a lot of options and if you're testing a font, you might be exporting it and converting it you know, many times in a row, so you can always click remember my settings, it will write a little cookie for you, next time you come back, it will load up the same settings which is really neat. Now before you can download this, you need to tell it that yes indeed it's legal for me to do so. If you don't own the font, obviously you can't convert it. But in this case, we built the font from scratch, so we certainly have permission to do that. All right, after all that's done. I'm just going to click download your kit and this is going to generate a zip file in just a moment, it's going to ask me where I want to save it. So it's going to give you a zip file and I'm just going to download this to the 05_01 directory and save it. And as soon as I've done that, I'm going to go out to that folder and double-click it to see what it gave me. It's like Christmas, you're unwrapping your present here. Okay, so what we've got is an HTML demo file. We've got four font faces that we asked for, the SVG, EOT. True Type and the wall fonts. We have configurator text files so if you wanted to do those same settings, you could use that text file to load them up again in case your cookie expires and you want to do exactly the same thing. We've got some dependency files for our specimen because our little demo page here is actually a really nice demo page. And then we have this style sheet that contains all the CSS that we'll need to actually display those, and in the next exercise, we're going to take a much closer look at those files so you know exactly kind of what's going on there. But there are a lot of other services out there that will do for you what Font Squirrel is doing, but honestly I haven't found any that are as convenient and as consistent as Font Squirrel. There are a lot of them out there that you can install locally and you can control those through scripting, so if you need a more automated solution you might want to test out some of those options.
Note: Glyphs Mini is only available on the Mac.
- What is an icon font?
- Searching options for creating icon fonts
- Choosing existing icons from an online service
- Setting up your font-creation workspace
- Drawing curves
- Creating compound paths
- Exporting glyphs
- Setting glyph properties
- Simplifying paths
- Exporting your icon font
- Using Font Squirrel to generate web fonts
- Testing icon fonts