Expand Your Web Design Font Choices, Part 2

There’s a lot of activity on the part of browser developers, font foundries, and online services to support a wider selection of fonts on Web pages. However, it’s a bit like the Wild West: disorganized and chaotic, with multiple Web font formats and techniques fighting for supremacy. The good news is that as long as you take into account these differences, you can start using Web type now.

In part 1 of this series, I introduced the basic concept of Web fonts — using the CSS @font-face rule to download and use fonts in Web pages — as well as a couple of online services that handle the technicalities of dishing up the fonts to your site’s visitors. In this follow-up, I’ll cover the do-it-yourself method: putting the fonts on your own server.

The biggest problem with hosting fonts on your own server is getting the proper font formats. The two main types are TrueType and OpenType fonts (.ttf and .otf), which work in Firefox 3.5, Safari 3.1, Opera 10 and Chrome 4; and Embedded OpenType fonts (.eot) fonts, which work with Internet Explorer 4 and later. There are a couple of other formats: SVG works with Safari and the iPhone, and Web Open Font Format (.woff) works with Firefox 3.6 and later.

While it’s easy to buy TrueType and OpenType fonts from many font vendors, EOT, SVG and WOFF fonts aren’t easily available. However, you can get the proper font formats from Kernest.com and Font Squirrel, my favorite. Font Squirrel also has an online tool for creating the proper formats from your own TrueType or OpenType fonts. I’ll show you how to use Font Squirrel’s @font-face kits and its @font-face generator.

Using Font Squirrel’s @font-face Kits
Font Squirrel offers tons of free, downloadable Web fonts in EOT and TrueType formats — more than 600 free fonts as of this writing (Figure 1)! The best place to start is with one of the hundreds of “kits”. Font Squirrel’s @font-face kits are ready-to-go Web font packages that include both TrueType and EOT fonts, a demo page, and an external style sheet with the CSS code needed to use the fonts.

Figure 1. Fontsquirrel.com. Click on the figure to see a larger version.

Using the @font-face kits is easy. I’ll give you a quick overview of the process, then take you through a step-by-step tutorial.

1. Go to the @font-face kits page. Visit http://www.fontsquirrel.com and click the “@font-face Kits” button in the top navigation bar. This takes you to a page listing all the kits available (Figure 2).

Figure 2. Font Squirrel’s @font-face kits are organized by font type: Handdrawn, Sans Serif, Serif, and so on. Find the font you like and click the Get Kit link (circled). Click on the figure to see a larger version.

2. Find a font you like. Fonts are grouped into categories: Slab Serif, Sans Serif, Serif, Stencil, and so on. In addition, you’ll see small graphics demonstrating what each of the fonts looks like. Scroll down the page until you find a font you like.

3. Click the Get Kit link (circled in Figure 2 above). This downloads the files you’ll need.

4. Organize your files. The most important files are the EOT and TrueType font files. Pu them in the same folder as any external style sheets you use on your site. For example, if you have an external style sheet named “site.css” in a folder named “css” in the root of your site, move the two font files into the “css” folder.

5. Consolidate your stylesheets. When you downloaded the kit, you also downloaded a sample stylesheet, named stylesheet.css. Open this file, copy the code from it, and paste the code into the top of the external style sheet you use for your site. Some kits have just one font, others have several (the same typeface in different weights and with italicized variants). For each font you plan on using, copy a single @font-face rule to your main stylesheet.

6. Create styles using the font. When you want to use a font, simply add the CSS font-family property to the style using the font-family named in the @font-face rule you copied from the stylesheet.css file. For example, if the @font-face rule uses the font-family name BlackKnightFLFRegular, you would use that name in the style like this:

h2 {
font-family: ‘BlackKnightFLFRegular’;
}

Those are the basic steps you need to follow. Now, let’s try it out in a hands-on tutorial.

Font Squirrel’s @font-face Kits in Action
To get a more hands-on understanding of Font Squirrel’s @font-face kit, you can follow along with this short tutorial. You’ll need to download the files for this tutorial here. The compressed folder is named “font_face_site.zip”.

I’ll be using Dreamweaver, but you can use whatever text editor you prefer for building Web pages.

1. Launch Dreamweaver and choose Site > New Site. Click the Advanced tab in the Site Definition window and type “Font Face” for the site’s name. Click the folder icon to the right of the “Local Root Folder” field and select the folder you downloaded — font_face_site. Click OK to finish defining the new site. There’s a single page, font.html, and a folder, css, containing an external stylesheet named site.css.

2. Open a Web browser and point in to http://www.fontsquirrel.com. Click the @font-face Kits link to load a list of available fonts.

3. Locate the BlackKnight font at the top of the list and click the Get Kit link. Your Web browser will download a folder named BlackKnightFLF-fontfacekit.

4. Open the BlackKnightFLF-fontfacekit folder you just downloaded. Copy the files BlackKnightFLF.eot, BlackKnightFLF.ttf, and stylesheet.css into the css folder inside the font_face_site tutorial folder. This is an important step. You need to make put the font files in the same folder containing your site’s stylesheet.

5. In Dreamweaver (or your text editor), open the file stylesheet.css. This is the style sheet you downloaded from Font Squirrel, and it contains the @font-face rule you need to make all this work.

6. Copy the entire rule from @font-face { to the closing }. (The other stuff is comments needed to make the font work.)

7. Open the site’s stylesheet. Its name is site.css and it’s also in the css folder.

8. Paste the @font-face rule into the site.css file. Put it at the top of the file, before any of the other styles.

Now it’s time to use the font. One way is to simply type a CSS rule into the stylesheet, using the font-family property. For example:

h1 {
font-size: 48px;
font-family: BlackKnightFLFRegular;
color: #9A0F3A
}

If you’re using a text editor, type the above style into the stylesheet and preview the page in a Web browser. But if you’re a Dreamweaver user, I’ll show you how to incorporate this font into your Dreamweaver style-creation routine.

9. In Dreamweaver’s CSS Styles panel, click the New Rule button (or choose Format > CSS Styles > New. The New CSS Rule window appears (Figure 3).

Figure 3. In the New CSS Rule window in Dreamweaver, you pick a style type, give it a name, and tell Dreamweaver where to store the CSS code.

10. Choose Tag from the top menu, type h1 in the Selector Name field, and select site.css in the bottom menu. Click OK. The CSS Rule Definition Window appears (Figure 4).

Figure 4: Dreamweaver’s CSS Rule Definition window provides a friendly way to create and edit CSS styles. Click on the figure to see a larger version.

11. Type 64 in the Font-size box and choose a color from the Color box.

12. From the font-family menu, choose Edit Font List. The Edit Font List window appears (Figure 5). Type BlackKnightFLF in the Font field in the bottom right of the window (circled in Figure 5). Press the << button, which moves that font name into the “Chosen Fonts” list. This font will now appear in all font-family menus when creating a style in Dreamweaver.

Figure 5. Dreamweaver lets you create your own sets of fonts that appear anywhere in the program where you can select a font.

You should add a backup font, as well. Because this BlackKnightFLF font is rather unusual, you can’t count on everyone having a similar typeface, but you can set up one of the “default” font types. In the Available Fonts list, scroll to the bottom until you see “Fantasy”. Double-click it to add it to the list. The Edit Font List should now look like something like Figure 5 above.

13. Click OK to close the Edit Font List window and return to the CSS Rule Definition window. From the font-family menu, select the last item in the list — the new font set you just added. Click OK to complete the style. Dreamweaver should display a large headline in the color you selected. Unfortunately, Dreamweaver can’t display fonts that are specified with the @font-face rule, so you need to preview the page in a Web browser. The final result should look something like Figure 6.

Figure 6. It only takes a few steps to add custom fonts to your site — without the use of graphics, Flash or JavaScript. Click on the figure to see a larger version.

If the font doesn’t appear correctly in the Web browser preview, make sure you’ve put the font files into the css folder and copied the @font-face rule from the stylesheet.css file and pasted it into the site.css file. You can see the finished version of the CSS in the finished.css file in the tutorial files.

Creating Your Own @font-face Fonts
Say you own the perfect font but can’t find it on Fontsquirrel.com, Kernest.com, or any other site with @font-face fonts. In that case, you can create it yourself using Font Squirrel’s online tool for creating Web-ready fonts.

However, before you go crazy turning your into font library into Web-ready fonts, there are a few things to keep in mind:

* You can only use TrueType or OpenType fonts. Postscript fonts won’t work.

* You must own the font and that font must be licensed for Web use. Some font licenses don’t let you use it on the Web. Many font foundries are justifiably worried about their fonts being freely downloaded. Unless your font license specifically says you can use it as a downloadable Web font, don’t use it with the @font-face rule. However, there are lots of open source fonts without these kinds of restrictions. (And, of course, all the fonts on Font Squirrel are free and licensed for Web use).

If you do own a Web-licensed TrueType or OpenType font, you can use Font Squirrel’s @font-face Generator to create EOT, SVG, and WOFF font formats. The tool also includes settings to help improve the quality and reduce the file size of the fonts.

To use the @font-face generator:

1. Go to the @font-face Generator page. Visit http://www.fontsquirrel.com and click the “@font-face Generator” button in the top navigation bar. This takes you the @font-face Generator page (Figure 7).

Figure 7: You can customize how Font Squirrel’s @font-face generator creates TrueType, EOT , SVG and WOFF fonts. A ton of options let you decrease file size and improve rendering in Windows. Click on the figure to see a larger version.

2. Click the Add Fonts button. This opens a file window where you select a TrueType or OpenType font. I recommend TrueType, since it seems that format converts better to other formats like EOT. Select the font and click the Select (or Open on Windows) button to upload the font to the site. You can click the Add Fonts button again to add more fonts. However, the site owner asks that you only process a couple fonts at a time. Hey, it’s a free service, so don’t crash the poor guy’s computer!

3. Check the Agreement box. This is to confirm that you own the font and that its license permits font embedding.

Go to page 2 for the rest of this step-by-step and to learn the drawbacks of using @font-face.

Tags
Posted on: March 26, 2010

3 Comments on Expand Your Web Design Font Choices, Part 2

  1. Thanks so much for this DIY explanation.

  2. Will Font Squirrel work with iWeb? Are there special instructions? Thanks so much.

  3. Thanks for the tutorial.

Leave a comment

Your email address will not be published.


*