Spring Sale! Save 30% on all books w/ code: PLANET24
Web Dev + WordPress + Security

Visual Walkthrough of @font-face CSS Code

[ @font-face ] 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..

[ Choose a unique font name to use in your stylesheet ]

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).

[ Specify the font's full name and PostScript name ]

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.

[ Use the actual file names for each of your four font formats ]

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.

[ Ensure the format matches the file type for the last three 'url' declarations ]

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

[ Specify the ID used during the SVG conversion ]

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.

[ Double-check your file paths! ]

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 ;)

[ Use any selector supporting the font-family property ]

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.

[ Specify the same font name as used in the first line of the @font-face ruleset ]

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.

[ Declare suitable fallback fonts for when '@font-face' isn't supported ]

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 = Fullstack Developer. Book Author. Teacher. Human Being.
The Tao of WordPress: Master the art of WordPress.

18 responses to “Visual Walkthrough of @font-face CSS Code”

  1. Excellent tutorial. But I have not been able to get the Museo font to work on any computers other than my Mac. I’m specifying Museo and a font weight of 300 or 500 since I’m using both on my site. I also tried the Cufon method as well, but can’t seem to get the font to show up in other computers in any browser. The site is at http://www.drkdesign.com/new

    Here’s my CSS:

    @font-face { /* declare fonts */
         font-family: "Museo";
         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");
         font-weight: 300;
    }

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

    ——–

    h2 {
         font: 1.7em Museo, Helvetica, sans-serif;
         font-weight: 300;
    }

    #intro p {
         font: 1.4em Museo, Helvetica, sans-serif;
         font-weight: 500;
         line-height: 2.1;
    }

    #bottom h3 {
         font: 1.3em Museo, Helvetica, sans-serif;
         font-weight: 300;
    }

    Can someone help?
    Thanks!

  2. By the way, my site is now located at http://www.drkdesign.com.

  3. Noticed you have @font-face working with wordpress, could write a post on how you we might able to do that?

  4. @yan: Actually, it’s pretty straightforward. The CSS code goes into your active theme’s style.css file. As long you target the tags used in your theme files (<h1>, <h2>, <p>, etc.), the custom fonts should display on the web page (for supportive browsers).

  5. Thank Jeff, I wasn’t expecting a response so quickly, if only beer could be e-mailed. I copied and past the code above verbatim, I works like it should now. Thanks again.

  6. Hey I’m very confuse, I have done everything that you say in your post and no matter what I cannot get my custom font to show up on my blog (>.<) I keep on checking everything over and over but it all looks ok. any idea what can I do?

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Wizard’s SQL for WordPress: Over 300+ recipes! Check the Demo »
Thoughts
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
First snow of the year :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.