Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
For this installment of the First Look series, James Williamson reviews the current implementation and future direction of web fonts: downloadable font resources that can be retrieved with the CSS @font-face declaration. The course begins with the evolution of online typography and current CSS font capabilities, and then dives into the W3C CSS Fonts Module specification, showing how to utilize web fonts, ensure cross-browser consistency, and how to use CSS3 to enhance the styling of web fonts. Font hosting services and tools such as TypeKit and the Google Fonts API are demonstrated. Exercise files accompany the course.
Although we downloaded the Junction font in our last movie, we still lack several formats necessary for using Junction on our site. We are also going to need to make sure that the CSS code that we use is optimized for cross browser complainxw and thankfully all of those needs could be met with just one tool, the fantastic Font Squirrel at @font-face generator from, well, Font Squirrel. Once you use it I think you are going to see why I call it the most important web font tool currently online. So here we are at fontsqurriel.com and I can't say enough good things about this place.
What I want to do is I need to take some existing fonts that I have and of course those are fonts that I have the proper permissions for and I need to build and @font-face, they call it @font-face kit with this. So I am going to click on the link right here for it @font-face Generator. Notice we can browse for free fonts to download, we can look at some existing @font-face kits that we don't have to get generated for us, but if you have a font that you want to use that's installed on your machine then you can use the @font-face Generator. Well I am going to scroll down a little bit, but the first thing I want to do is to add some fonts. So I am going to add the Junction font that we downloaded in the last movie.
So if you didn't do the previous movies, go back and watch that first and then come back here. So I'll click Add Fonts and I go to my Exercise Files, I am going to go to the 03_08, remember that's our previous movie, and I am going to go inside the Junction folders. This is that exact one that we downloaded and I'm going to upload the True Type font. Now the reason that I'm going to upload the True Type font rather than the Open Type font is that True Type font often contains some hinting already for the screen, so I really kind of like that and I want to use the True Type font.
Also the True Type font is used to create the embedded Open Type font from Microsoft. So rather than having to make the Font Squirrel Fenerator generate the True Type font first and then the OT, I am just going ahead and go straight from the True Type font. So I am going and open that up and you can go ahead and choose EASY settings, which will just go ahead and take care of everything for you, or you can choose the EXPERT settings, which we are going to do. So I am going to click on the EXPERT settings and most the stuff we are going to leave the same, but there are one or two changes that we are going to make here. I am going to use all my formats except for the SVGz. I don't really need that.
SVG is primarily used on mobile devices. So if you're serving to mobile content SVG is a really good format to choose. For rendering I am going to go ahead and leave all of the defaults, so that the hinting is going to be apply, the kerning is going to be stripped out, since the browser are going to use it anyway. Now I have a couple of miscellaneous options here. If you're a font designer, one of the things that you might want to do when you create a new font is to do WebOnly. That way you could sort of open source at font or make it available online, but it's not something that people could download and then install on the desktop.
You can also build a Cufon file, so if you want to provide Cufon as a fallback you can go ahead and do that here now. For the Subsetting I am going to choose No Subsetting. That's actually going to increase the size of the resulting font formats but it's going to give me a larger character set to choose from if I ever need to. And for my CSS formats I am going to make sure that I'm doing the bulletproof syntax so that that's the latest bulletproof Paul Irish syntax that we will take a look at it little bit later on. You could also do Style Linking if you have multiple fonts that you need to group in one family. If you had a Bold and a Display and Italic, you could just enable Style Linking.
Junction is its own animal so we don't need to do that. It's going to generate a demo HTML file for you as well if you want it to. You can go ahead and change the default text. I mean for example the web font name, I'll just change it to junction so that on the title of the page it lets me know which font I am looking at. Now the last thing that I need to do and this is probably the most important. Click right here to say Yes, the fonts I am uploading are legally eligible for web embedding. You should take this incredibly seriously, because if you don't have the proper permissions to use this font and you are in violation of the agreement, as a designer you are one that's liable for that.
So if you don't know what the particular usage rights for a font is, please research them before using this tool. All right I am going to go ahead and download this kit and I want to download this to the 03_09 folder in my Exercise Files. So find your Exercise Files, download it to the 03_09 folder, and I am going to hit Save. And when I finished downloading I am going to open up that folder to check out what I've got. So I now have a ZIP file. If I expand the ZIP file I can see that inside of that a folder I have a EOT file, SVG, True Type, and WOFF, which is going to cover all the needs of my browsers out there.
I also have a demo.html file. So if I open that up I can see sort of the type specimen page. You'll notice that we change the title when the demo was created, so now it's the Junction Regular. That way if you have a bunch of the specimen files you know exactly which fonts you are looking at. So that's the nice way to sort of preview the font, see how it looks at different sizes, and decide where and how to use it. And you'll also notice that we have a style sheet opened here and I am going ahead and open that up so I can take a look at it and inside this you're going to find the @font-face syntax necessary for us to use this font.
It is using Paul Irish's bulletproof syntax and we are going to go over the syntax little bit later on in the course, line by line, tell you what everything is doing. The really nice thing about this is that all you need to do in order to use Junction now is upload the fonts to your remote server in the proper directory, modify the @font-face syntax you are seeing here based on what directory you put your fonts in, and then just copy and paste and start using it. That's it, no muss no fuss. The good thing is the Font Squirrel keeps up with the syntax and then modifies it whenever changes to browsers or browsers support necessitate it, which is really-really cool.
So if you're going to be self hosting your fonts, Font Squirrel is an absolutely invaluable resource. Now later on we are going to use these fonts in the CSS that we got from our font kit in our Alice in Web Fonts project. And keep in mind that many the fonts that you might want to use they're probably already on Font Squirrel as a downloadable @font-face kit. In fact if I go to my @font-face kits and if I were to take the time to browse through all of the just dozens of kits they have, Junction is one of them that I would find.
So we really could skip the whole step of downloading it from The League of Movable Type and just download the ready- made kit here at Font Squirrel, but then again we would've learned of the entire process, now would we? Of course it goes without saying, but I am going to say it again, you should always make sure you possess the proper license before creating font kits with Font Squirrel.
Find answers to the most frequently asked questions about Web Fonts First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.