Start learning with our library of video tutorials taught by experts. Get started

Web Fonts First Look
Illustration by John Hersey

Generating web fonts


From:

Web Fonts First Look

with James Williamson

Video: Generating web fonts

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Web Fonts First Look
3h 23m Appropriate for all Jan 12, 2011 Updated Dec 13, 2011

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.

Topics include:
  • What are web fonts?
  • Understanding the font stack
  • Using @font-face
  • Rendering basics
  • Choosing a font hosting service
  • Downloading licensed fonts
  • Generating web fonts
  • Font sizing
  • Transforming text
  • Creating special effects with text shadows
Subjects:
Web Web Fonts
Author:
James Williamson

Generating web fonts

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.


Expand all | Collapse all
Please wait...
Q: This course was updated on 12/13/2011. Can you tell me what's changed?
A: The movie "@font-face syntax update" was added, which explains changes to @font-face in HTML5.
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Web Fonts First Look.

Return to your organization's learning portal to continue training, or close this page.


OK

Course retiring soon

Web Fonts First Look will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion. For updated training, check out Choosing and Using Web Fonts in the lynda.com Online Training Library.


Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked