Life Beyond Verdana and Georgia...

In the old-days, we used web-safe fonts—a limited set of fonts that are installed on all computers. We can now use a greater selection of fonts through the use of the CCS @font-face [W3C Specification] rule.

There are several locations on the web where you can download, or link to, free fonts for use on your website. The 3 big ones right now are Google, Adobe, and Font Squirrel. Instructions for using each of them are described below.

Google Fonts Workflow

This is far easier than the Font Squirrel workflow, but there are more fonts to choose from on Font Squirrel.

1. Find the font you like from Google Fonts. Again, I look for fonts that include a Normal, Bold, Italic, and Bold Italic variations.

   

2. Click the “Quick Use” button (the middle one in the above screenshot).
3. Follow the instructions that appear after clicking the “Quick Use” button.

Optional: If you want to download the font to your machine (say you want to use it with Photoshop) click the download button.

Adobe Edge Web Fonts Workflow

1. Find the font you like from Adobe Edge Web Fonts.

2. Mouse over the font and a pop-up will appear showing the font variations. Click the “Select this font” link.

   

3. Click the custom styles radio button and choose the variations (bold, italic, etc.) that you need. If you choose default styles, you will get regular, bold, italic, and bold italic.
4. Follow step 2 and 3 instructions on the Adobe Edge page.

Font Squirrel Workflow

1. Find a font you like from Font Squirrel. I look for fonts that include a Normal, Bold, Italic, and Bold Italic variations. Ensure that it is also licensed for use on the web.
2. For this example, I will choose Caviar Dreams.
3. Download the Webfont Kit and place the Caviar-Dreams folder in your website (I like to put it in a “css” folder).
4. You should see a stylesheet.css file included with the Webfont kit. It will look similar to this:

@font-face {
	font-family: 'CaviarDreamsRegular';
	src: url('CaviarDreams-webfont.eot');
	src: url('CaviarDreams-webfont.eot?#iefix') format('embedded-opentype'),
	url('CaviarDreams-webfont.woff') format('woff'),
	url('CaviarDreams-webfont.ttf') format('truetype'),
	url('CaviarDreams-webfont.svg#CaviarDreamsRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'CaviarDreamsBold';
	src: url('Caviar_Dreams_Bold-webfont.eot');
	src: url('Caviar_Dreams_Bold-webfont.eot?#iefix') format('embedded-opentype'),
	url('Caviar_Dreams_Bold-webfont.woff') format('woff'),
	url('Caviar_Dreams_Bold-webfont.ttf') format('truetype'),
	url('Caviar_Dreams_Bold-webfont.svg#CaviarDreamsBold') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'CaviarDreamsItalic';
	src: url('CaviarDreams_Italic-webfont.eot');
	src: url('CaviarDreams_Italic-webfont.eot?#iefix') format('embedded-opentype'),
	url('CaviarDreams_Italic-webfont.woff') format('woff'),
	url('CaviarDreams_Italic-webfont.ttf') format('truetype'),
	url('CaviarDreams_Italic-webfont.svg#CaviarDreamsItalic') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'CaviarDreamsBoldItalic';
	src: url('CaviarDreams_BoldItalic-webfont.eot');
	src: url('CaviarDreams_BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
	url('CaviarDreams_BoldItalic-webfont.woff') format('woff'),
	url('CaviarDreams_BoldItalic-webfont.ttf') format('truetype'),
	url('CaviarDreams_BoldItalic-webfont.svg#CaviarDreamsBoldItalic') format('svg');
	font-weight: normal;
	font-style: normal;
}

This stylesheet certainly works, but when you want to use the font it becomes cumbersome to do so because using the bold or italic versions is done differently than when you use a web-safe font. Notice that font-weight and font-style are all set to normal, and they have different font-family names. Time to fix that.

5. Change the four lines containing font-family to read font-family: 'CaviarDreams';
6. Change the font-weight and font-style lines as appropriate for the specific font. See below for my final edits.

@font-face {
	font-family: 'CaviarDreams';
		src: url('CaviarDreams-webfont.eot');
		src: url('CaviarDreams-webfont.eot?#iefix') format('embedded-opentype'),
		url('CaviarDreams-webfont.woff') format('woff'),
		url('CaviarDreams-webfont.ttf') format('truetype'),
		url('CaviarDreams-webfont.svg#CaviarDreamsRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'CaviarDreams';
		src: url('Caviar_Dreams_Bold-webfont.eot');
		src: url('Caviar_Dreams_Bold-webfont.eot?#iefix') format('embedded-opentype'),
		url('Caviar_Dreams_Bold-webfont.woff') format('woff'),
		url('Caviar_Dreams_Bold-webfont.ttf') format('truetype'),
		url('Caviar_Dreams_Bold-webfont.svg#CaviarDreamsBold') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'CaviarDreams';
		src: url('CaviarDreams_Italic-webfont.eot');
		src: url('CaviarDreams_Italic-webfont.eot?#iefix') format('embedded-opentype'),
		url('CaviarDreams_Italic-webfont.woff') format('woff'),
		url('CaviarDreams_Italic-webfont.ttf') format('truetype'),
		url('CaviarDreams_Italic-webfont.svg#CaviarDreamsItalic') format('svg');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'CaviarDreams';
		src: url('CaviarDreams_BoldItalic-webfont.eot');
		src: url('CaviarDreams_BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
		url('CaviarDreams_BoldItalic-webfont.woff') format('woff'),
		url('CaviarDreams_BoldItalic-webfont.ttf') format('truetype'),
		url('CaviarDreams_BoldItalic-webfont.svg#CaviarDreamsBoldItalic') format('svg');
	font-weight: bold;
	font-style: italic;
}

7. To use this font, include the CSS file in your web page and then use like you would use any other font.

.caviar {
	font-family:CaviarDreams, Verdana, Geneva, sans-serif;
}

Problems

When testing locally, Firefox may not display the @font-face fonts. This is due to only allowing relative paths from the same server or something like that. Anyway, test Firefox off a server before you give up.

Dealing with Font Variations

Steps 5 and 6 of the Font Squirrel worksflow were inspired by these articles:

• http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/
• http://stackoverflow.com/questions/2436749/how-to-define-bold-italic-using-font-face
• http://www.metaltoad.com/blog/how-use-font-face-avoid-faux-italic-and-bold-browser-styles
• http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/

Flash of Unstyled Text

See the article Web Fonts and the Critical Path for an interesting discussion of Flash of Unstyled Text (FOUT).