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.
Whether you choose to host your fonts yourself or use a hosting service, there are a number of tools available online to make using web fonts a lot easier. One of the most useful tools for previewing and testing fonts is the Web Font Specimen by Tim Brown of Nice Web Type. The Web Font Specimen is a downloadable HTML file. So you can come here and download it to your desktop and it allows you to plug-in your own web fonts and see a resulting type specimen. This is going to allow you to preview how the fonts are going to render at different sizes, sample characters, and compare its body size against other standard fonts to help you build more effective font stacks, and you can click.
I'll show you a demo specification so you can see what I am talking about. So you can download this, plug your own fonts into it, and then you'll get your own version of this font specimen, which is really cool. In fact, Typekit uses a version of this for their own font specimen. So if you download this and start using it, you will be able to build the same type specimens that Typekit uses on their website. A site that uses the Web Font Specimen to display hand-picked web fonts is the site goodwebfonts.com.
This is brought to you by Laura Franz and this site, at the time of this recording, features 10 hand-picked really high quality web fonts and it gives you some background on the fonts, who created them, recommendations on using them and another really cool thing that it provides a type specimen, so that you can preview the fonts as well. This is Calluna Regular, a font that we are going to be using a little bit later on in some of the exercise files. You can see we have some body size comparisons. So it's a different type specimen but similar to the one that you can go and build yourself using the Web Font Specimen tool that I showed you just a moment ago.
Another helpful preview utility is the typetester.org. Using Typetester you can compare up to three different typefaces at once. You can use their placeholder text, or you can type in your own, and you can then go ahead and experiment with the type formatting and the fonts that you are going to use to compare either three different fonts or variations on the same one. So you can just grab the pull-down menu and specify any font that you want. Notice that we have a safe list here of system fonts. We have some Windows default fonts. We have some Mac default fonts.
If I scroll a bit further down, see also the fonts from the Google Fonts API, which we are also going to be using in this course, are available to us. If none of those suit my needs, I can just go ahead and specify any font that I have got on my hard drive. If you haven't installable version of a font that you are going to be using on your site, you can check it out as well and start comparing it to the other fonts that you might be using. So this is extremely helpful tool that allows you to see how fonts are going to work together. It allows you to compare similar fonts to see which one you want to use.
It also allows you to play around with formatting options, so you can see exactly which formatting options are right for the site that you are building. If you're looking for help in deciding which fonts to use together, you are going to find awesome font stacks extremely helpful. You can find this at awesome-fontstacks.com. You'll start by creating a font bundle containing a headline, body copy, decorative copy, and a monospace font from their list of available free fonts. Let me go ahead and demonstrate that for you. You can go ahead and create a font bundle by clicking on any of the fonts that they recommend for headlines, and you can show all of the fonts if you'd like to do that.
I am just going to click on Nobile here. You can see that it shows you a nice little sample page of what that could look like and next up I would choose a text font. Basically it starts winnowing your choices down. Saying hey, here's some text that would probably go pretty well with a headline font that you chose. So if I click Gentium Basic for example, it shows how those two fonts sort of interact with each other. Next up I would choose a decorative font and you can just keep going with this. Just clicking fonts until you get your entire font stack done.
Now what's really nice about this is that number one you could sort of see how these fonts are interacting with each other. You get some guidance through it. So a lot of thought has been put into which fonts go together on the site, so that you're picking fonts that will go together. And then once you are done, it creates a bundle for you. It generates a CSS that you can use on your site to utilize these fonts and then it gives you links right up here where you can download those fonts and then start using them on your own server to host them yourself. So it's only showing you a list of free fonts that you can go out and grab.
It's extremely helpful little tool. The font lists itself is a little smaller than you might find on other sites but that's because it's really these handpicked high quality free fonts that you can use, so as more of those become available. I would imagine that we will see more of them on this site as well. There are plenty of times I need a certain accent or character but I'm really just not sure how to generate that. That's especially true of ligatures and items like that. Well, this site, Letters & ligatures from Interject Me. It is interject.me/letters.
It's a very helpful utility that provides you with a single click to copy those characters into your clipboard and then you can paste them in whatever document you're working on, not just your websites. So if I scroll down and find say a ligature I'm looking for, so maybe this ft or ff, just clicking one time places that up there and it actually places that in your clipboard. So if I had a text file open, I could go ahead and paste that ligature directly into any document I am working on, regardless of whether it's a text file or a webpage or really anything.
So again, this is a very, very helpful utility. Being able to test drive your fonts before choosing them is pretty important but seeing how it's going to render in various browsers and platforms is just as important if not more so. Typekit features are really nifty tool you can use even if you're not a subscriber and I want to highlight that for you really quickly here. So I am on typekit.com and I have clicked on the Browse Fonts link. I am just going to choose any one of these fonts. So I will choose Adobe Text Pro because it is the very first option. So notice that when I am browsing fonts, I can look ar through different weights and styles available.
I can look at a specimen, but this is what I am looking for right here the Browser Samples, when I click on that, I get some screenshots for these different font variants and font weights. You will notice that the screenshots are listed by platform and browser. So I could compare text on the Mac and Safari and Firefox to see what type of rendering differences I had, and I can go over to the Windows platform, see how it's rendering on Windows, see the smaller sizes, I am just not getting quite quality I want maybe for this particular font.
See what it looks like in Vista, and this gives you a really good feel for whether this font is appropriate for what you're working with or not. Now, obviously one of the things that you want to keep in mind here is that this text is rendered based on how Typekit is serving the font. So your own implementation, if you're not using Typekit, might differ and result in slightly different rendering, but either way it's a really good way to kind of see how your font is probably going to render on another platform or another browser. Now if you are looking for true browser testing, you have a number of choices and I want to mention a couple of these. browsershots.org, this is a free service, and offers quite frankly what is a bewildering array of platforms and browser.
So you can see all these that are checked right now. So essentially here is how I used this service. You select exactly the browsers that you want. So I can sort of turn off everybody off and say all right, Firefox 3.6 on Windows, Flock, look definitely Flock, Chrome. On the Mac, maybe Safari 5.0. You will notice that they don't always have the latest version of browsers but they continue to add them and hey, this service is free. At that point, you would enter the URL of the page that you want to preview and you hit Submit and after a short period of time in some instances, a long period of time in others, it will go ahead and serve up screenshots of your page in those browsers.
The downside is it's only going to show you sort of the top portion of the page. It doesn't give you any scrolling functionality, but it is free and it is a great tool to sort of get a nice feel for how your text rendering is working in that particular platform. Adobe BrowserLab is a relatively new service and it's free at the moment but it is going to require a subscription in the near future. It's a great service. Honestly, it's one of my favorites. It allows you to build and save browser packs that you can test your pages against. So you can store multiple browser packs. It's got multiple preview options and it does integrate with other products.
So if you use Dreamweaver, BrowserLab is built right into it. Now there are other options to BrowserLab and BrowserShots.org out there and if you just do a quick Google search, you will find a ton of different companies that offer browser previewing services. Most of those however do require a monthly subscription. So my advice? Just go ahead and try out some of the free services and sign up for some trial accounts for some of the monthly subscription based services to see which one of those solutions is right for you, so we can accurately preview your pages. If you're going to be hosting fonts yourself, one of the more common tasks that you are going to face is creating all of the different font formats required for serving up web fonts, especially EOT and WOFF font formats, which aren't native to desktop versions.
So I want to talk about a couple of tools that can help you do that. TT to EOT, a little awkwardly named, but that's how it works. This is a very simple and very straightforward tool for making EOT or Embedded Open Type Files. You simply use this interface. You can browse to upload any TrueType fonts. So it does have to be TrueType and it's going to convert it to an EOT for you and it's no muss, no fuss. It does it really quickly and you can just download it and start using the EOT. Now in the same vein, EOTFast.
eotfast.com, this is a free and really powerful EOT conversion tool from Readable Web. Now this is something that you can download and install locally and then just go ahead and use it anytime you need to convert TrueType files to EOT files. If you are looking for something with a few more options, the Online Font Converter is a really neat tool. This is a free tool and it converts to and fromjust an amazing range of format. So you can see right here, we have got a listing of all the different formats that it can take in and convert to.
So any of the formats listed here, you can upload and then you can get back and return any of the same formats you are seeing here. So if you need to go from EOT file to an Open Type Font, you need to go to TrueType to a WOFF font, this is a tool that can help you out. You can't use this service without an account, but it suggests that you register in order to receive notifications when your conversions are complete. Basically, you are going to upload these and after a short amount of time, the conversion will finish and you can go download it. If you sign up for an account, it will let you know when your files are available for download.
Those accounts are free and the interfaced really isn't anything fancy, but it doesn't really matter because the service, it's really solid and it's really fast. Now in many ways I've saved the best web fonts tool for last. Font Squirrel, it is just an amazing online service. The first thing it does is it offers a hundreds of open-source free font that you can download. And in addition to that, it provides you with the tools that you need to convert those fonts to needed web font formats, and on top of that, it generates the @font-face syntax using the latest bulletproof syntax by Paul Irish to help ensure cross browser compliancy.
It's like a big huge one-stop shop for getting fonts, converting them to the proper format, and generating the proper CSS for you to host them yourself. It is truly an amazing tool and a huge timesaver. We are going to be using Font Squirrel a little bit later on in the course to convert fonts to proper web font formats and to generate the CSS code that we are going to be using as well. So it's a tool that I use. It's a tool that I really, really recommend you become familiar with. Okay, so that's a quick or not so quick tour of some of the tools that I find extremely useful when working with web fonts.
I encourage you to try some of them out and find the ones that are going to be the most helpful to your own specific workflows.
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.