Visual Walkthrough of @font-face CSS Code

In my previous post on Quick and Easy CSS @font-face Code, I provide a choice set of CSS rules for embedding custom fonts into your web pages. It’s a solid, cross-browser technique that works great, but as Marty Thornley pointed out, it would be useful to have a more thorough explanation of how the code actually works. So, rather than going back and adding a bunch of additional information to the original post, I’m following up with a visual walkthrough of the @font-face code.

In step-by-step visual format, this article will show you what the code is doing and how to use it with your own custom fonts.

Step 1: Declaring the @font-face rules

The first thing we want to do is copy & paste the quick and easy @font-face code into our stylesheet:

@font-face { /* declare fonts */
	font-family: "MuseoLight";
	src: url("fonts/Museo300-Regular.eot");
	src: local("Museo 300"), local("Museo-300"),
		url("fonts/Museo300-Regular.woff") format("woff"),
		url("fonts/Museo300-Regular.otf") format("opentype"),
		url("fonts/Museo300-Regular.svg#Museo-300") format("svg");
		}

Yes, it’s a hideous-looking chunk of CSS, but that’s not going to stop us from using it to embed our own custom fonts. Let’s break it down and see how the different parts fit together..

First specify a name for your custom font. It can be anything, but keeping it logical and unique will make things much easier. This will serve as the name that you declare elsewhere in your stylesheet when applying the custom font to your chosen selector(s).

In this line, we specify both the actual full name of the font and its PostScript name. This enables the browser to render your fonts using a local copy instead of having to download it from the server.

Here we are specifying the URL of each of the four different font formats. The first line targets Internet Explorer, while the other three lines target other types of supportive browsers.

For these three format declarations, we want to make sure that they are matching up with their respective file types.

This fragment identifier refers to the font-specific ID used when converting the font to SVG format. If you converted the file yourself, then use whatever ID you specified, otherwise just open the font and look for the following code: <font id="Museo-300">. Of course, the ID will vary according to your specific font.

Just a friendly neighborhood reminder to double-check the accuracy of your file paths. This is probably the number reason why @font-face font-embedding fails to work.

Once you have the @font-face rules properly configured and your fonts uploaded, you’re essentially done with all of the “new” stuff. Everything from this point on is just business as usual. Our custom font is ready and available for use in our stylesheet just like any other commonly used font (such as Verdana, Arial, et al). So now let’s see how to apply our font to our chosen CSS selectors..

Displaying your custom font on the web page

Now that we have our custom font ready to use, displaying it in our design is as easy as including a font-family declaration to the desired selectors. To visualize how to do this, let’s add a few more lines to our current CSS code:

@font-face { /* declare fonts */
	font-family: "MuseoLight";
	src: url("fonts/Museo300-Regular.eot");
	src: local("Museo 300"), local("Museo-300"),
		url("fonts/Museo300-Regular.woff") format("woff"),
		url("fonts/Museo300-Regular.otf") format("opentype"),
		url("fonts/Museo300-Regular.svg#Museo-300") format("svg");
		}
		/* display fonts */
		h1 { font: 24px/1 MuseoLight, Verdana, sans-serif; }
		h2 { font: 18px/1 MuseoLight, Verdana, sans-serif; }
		h3 { font: 14px/1 MuseoLight, Verdana, sans-serif; }

For this walkthrough, we’ll apply our custom font to the top three heading elements, h1, h2, and h3. Note that we are using CSS shorthand notation to combine three properties – font-family, font-size, and line-height – into a single declaration block.

This is where it gets easy ;)

Here we are selecting the top three heading elements. They recognize the font-family property (or font when using the shorthand technique), so we’re good to go for applying our custom fonts.

Within each selector, include your font’s unique name in the font property value. Make sure it’s the first name in the list, followed by your preferred fallback fonts.

After declaring your primary font, throw in some fallbacks. If the browser doesn’t support @font-face, it will display the first available fallback font. Graceful degradation is a beautiful thing.

At this point, you should have a good understanding of how to specify your own custom fonts using @font-face. Once you have the actual font files, you have everything needed to configure your @font-face rules.

Now get out there and bring sexy back.

About the Author

Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.