Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
If you are looking to host web fonts yourself, you are going to need some high-quality licensed fonts. Now for certain fonts you are going to need to purchase the proper license. Browsing services out there like Typotheque and FontShop will quickly show you how incredible the quality of web fonts can be. However, there are many high- quality fonts available online for free. And in this movie, I am going to show you how to find high-quality fonts and make sure the license agreement allows you to use them in your projects. Earlier, when I was showing you some of the online tools for web font tools, I took you to DA Fonts.
dafonts.com and Font Squirrel. Now we'll be going back to Font Squirrel in a little while but DA Fonts is a fantastic place to go find free fonts and the site that I am on right now, The League of Movable Type, is another great place to find some free fonts. The reason I like The League of Movable Type and the reason I want to talk about these guys for a moment is because they're just as consortium of really cool people that said, "Hey let's find some really-really high quality fonts, let's open-source them so that we're providing open-source licenses from them and then just throw them out there to the community so they can begin using them online." Obviously I'm a big believer in paying for quality, so there are some really good font foundries out there and services that offer really high-quality fonts for sale and I don't want to discourage that at all.
However, there are also options out there like The League of Movable Type that can provide you with some nice free stuff as well. So let's go ahead and take a look at the site and some of fonts that they provide. As we scroll through here, you can see all sorts of different types of fonts, different weights, headline fonts, body copy fonts, display fonts. They have got some really, really nice fonts, and here is a League Gothic. A lot of times you are going to find some fonts that are available through type services and hosting services. You might say to yourself, "Well why in the world would I use hosting service if I can get it for free?" Remember there are a lot of advantages to using a hosting service outside of the fonts that you are going to be able to use as well.
A lot of times it is for the convenience. Now the font that I want to settle on is right here Junction. I want to use this Junction font in our Alice in Web Fonts Project, but before I do that I need to familiarize myself with the permissions granted on this particular font. There are a couple of ways of doing that. The first is to take a look down here at the very bottom of The League of Movable Type and notice that the fonts that are available through The League of Movable Type use the Open Font License and the Share Alike Creative Commons Attribution License and you can go ahead and click on those and open them up and read more about them.
So you can read through the actual Creative Commons Share and Share Alike. It has a different versions and limitations applied to that and there's also the Open Font License that takes a little bit more reading to get through but it will give you a lot of guidance as to what's allowed and what's not allowed. If you're looking for the specifics of the font itself then you can download the font and read through its license agreement. We are going to need to download the font to use it anyway so I am going ahead and do that. So I am going to go right over here to Junction, click on that, and then there's a nice little Download link. So I am going to download that and I want to download this to my Exercise Files in the 03_08 directory.
So 03_08, I am just going to go ahead and save that, and as soon as this downloaded I am going to open that folder up and I am just going to expand the ZIP file that downloaded. And inside that ZIP file I see that I have an OpenType font, a TrueType font. I have a VFB, which will allow me to open that up in some font editing software. So if I want to make changes to the font and tweak it, I actually have permission to do that. I need to know exactly what my permissions involved with using this font are and you'll notice that as part of the download it has a copy of the Open Font License that pertains to that font.
I can open that up and I can read more about what I'm allowed to do with this font and what I am not allowed to do with it. Now after reading through this, it's perfect for use in Alice in Web Fonts and I'm not going to be breaking any of the restrictions in terms of its use in going ahead and using Junction. So now I know I am clear to go ahead and use this font in my project. Okay, we know we can use the font and we went and downloaded it but I also noticed that I really only have the OpenType and TrueType formats. That's not can give me what I need for my cross-browser compliancy.
I am also going to need EOT files and WOFF files. So we'll handle that in our next movie as we use another great web font tool, Font Squirrel, to generate and @font-face kit for us.
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.