demystifying-font-face-rule
Design - Typography

Demystifying the @font-face Rule

I introduced you to using Google Fonts on your website in my last tutorial. Today we’re going to discuss serving up your own web fonts using the @font-face rule.

Most modern browsers support the @font-face rule. Versions of Internet Explorer prior to IE 9 do not. You can use fonts from services such as Google Fonts as well as ones you’ve put on your server.

Web and print fonts are different from each other. When purchasing a font for web use, ensure you’re purchasing the correct licence. A word of caution: If you’ve purchased a web font from a vender such as MyFonts, make sure you read the EULA. You may be restricted to using the purchased font on your own server, and not your client’s. (Your client may be required to purchase their own license in order to use it on their website.) A web font is optimized for web use and is packaged in four different files: WOFF, EOT, TTF & SVG formats.

  • WOFF (Web Open Font Format) is an emerging standard, and may one day be the only font format you need to put on your server. All major browsers support WOFF, including Internet Explorer 9.
  • EOT (Embedded Open Type) is Microsoft’s proprietary web font file format. It only works in Internet Explorer.
  • TTF (True Type Font) & OTF (Open Type Font) can be supported by most major browsers. Traditional TTF fonts may be flagged to prevent their use on web pages. They are also uncompressed, so they’re larger in file size than their web optimized versions.
  • SVG (Scalable Vector Graphics) fonts have been converted to graphic outlines of the licensed font for use on mobile devices.

Generating Web Fonts From Font Squirrel

It’s important to have the correct user licence before committing a web font family to your design. We’re going to use Font Squirrel, a great resource for free web fonts licensed for personal and commercial use. Go there now and find a font family to test.

You’re ready to go once you have a web font downloaded to your fonts folder. Note: When choosing web fonts from Font Squirrel, I ensure the font isn’t downloaded offsite because the web license may not be free.

Follow these steps to get your web font kit:

  1. Select a font by clicking on the sample image.
  2. Click the Webfont Kit button.
  3. By default, the TTF, WOFF, EOT & SVG checkboxes are selected. This is good. Click the Download @font-face kit button.(Circled item labeled 2.)
    IMAGE: Screen shot of Font Squirrel's web-font generator.

    Font Squirrel’s @FONT-FACE Kit generator simplifies generating your own web-font kits. If you own a font license that includes web use, you can use this tool to generate web versions of it.

  4. Once your web font has been created, it will automatically download to your default downloads folder.
  5. Move your new web font folder into your website’s fonts folder.
  6. Ensure all file names are lowercase and there are no empty spaces in file names. (Either delete the space or convert to a hyphen (-) or underscore (_). Note: words separated by a hyphen will be treated as individual words. Words joined by underscores will act as a single selection. This is a handy trick when manually changing parts of a file name, such as image sequences. Renaming files in this way will help ensure there are no glitches when loading fonts into browsers.

Mastering the @font-face Rule

Although we could build our styles in an internal style sheet, we won’t because our style sheet is going to contain many rules. For this project we’ll create an external style sheet.

If you don’t already have folders for fonts and styles, create them now.

  1. Create a style sheet. Save it to your styles folder as at_rule.css.
  2. Create a new HTML file and save it as at_rule.html.
  3. Write this code inside the head element of at_rule.html.


    <link rel="stylesheet" type="text/css" href="stlyes/at_rule.css" media="all">

    This line links our page to the stylesheet.

  4. Create at least one heading and one paragraph inside the body element of at_rule.html. We grabbed a paragraph of Hipster Ipsum text for out sample page.
  5. Now jump to at_style.css.
  6. All @ rules must appear at the top of the style sheet.

    @font-face {
    font-family: 'Alegreya Sans';
    src: url('../fonts/alegreya-sans/alegreyasans_bolditalic_macroman/AlegreyaSans-BoldItalic-webfont.eot'); /* Note the relative (../) url to our font.
    Browsers such as IE and Firefox will load only fonts from the same domain. */
    src: url('../fonts/alegreya-sans/alegreyasans_bolditalic_macroman/AlegreyaSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/alegreya-sans/alegreyasans_bolditalic_macroman/AlegreyaSans-BoldItalic-webfont.woff') format('woff'),
    url('../fonts/alegreya-sans/alegreyasans_bolditalic_macroman/AlegreyaSans-BoldItalic-webfont.ttf') format('truetype'),
    url('../fonts/alegreya-sans/alegreyasans_bolditalic_macroman/AlegreyaSans-BoldItalic-webfont.svg#alegreya_sansbold_italic') format('svg');
    font-weight: bold;
    font-style: italic;

    }
    @font-face {
    font-family: 'Alegreya Sans';
    src: url('../fonts/alegreya-sans/alegreyasans_regular_macroman/AlegreyaSans-Regular-webfont.eot');
    src: url('../fonts/alegreya-sans/alegreyasans_regular_macroman/AlegreyaSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/alegreya-sans/alegreyasans_regular_macroman/AlegreyaSans-Regular-webfont.woff') format('woff'),
    url('../fonts/alegreya-sans/alegreyasans_regular_macroman/AlegreyaSans-Regular-webfont.ttf') format('truetype'),
    url('../fonts/alegreya-sans/alegreyasans_regular_macroman/AlegreyaSans-Regular-webfont.svg#alegreya_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

    }
    @font-face {
    font-family: 'Alegreya Sans';
    src: url('../fonts/alegreya-sans/alegreyasans_italic_macroman/AlegreyaSans-Italic-webfont.eot');
    src: url('../fonts/alegreya-sans/alegreyasans_italic_macroman/AlegreyaSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/alegreya-sans/alegreyasans_italic_macroman/AlegreyaSans-Italic-webfont.woff') format('woff'),
    url('../fonts/alegreya-sans/alegreyasans_italic_macroman/AlegreyaSans-Italic-webfont.ttf') format('truetype'),
    url('../fonts/alegreya-sans/alegreyasans_italic_macroman/AlegreyaSans-Italic-webfont.svg#alegreya_sansitalic') format('svg');
    font-weight: normal;
    font-style: italic;

    }
    @font-face {
    font-family: 'Alegreya Sans';
    src: url('../fonts/alegreya-sans/alegreyasans_bolditalic_macroman/AlegreyaSans-BoldItalic-webfont.eot');
    src: url('../fonts/alegreya-sans/alegreyasans_bolditalic_macroman/AlegreyaSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/alegreya-sans/alegreyasans_bolditalic_macroman/AlegreyaSans-BoldItalic-webfont.woff') format('woff'),
    url('../fonts/alegreya-sans/alegreyasans_bolditalic_macroman/AlegreyaSans-BoldItalic-webfont.ttf') format('truetype'),
    url('../fonts/alegreya-sans/alegreyasans_bolditalic_macroman/AlegreyaSans-BoldItalic-webfont.svg#alegreya_sansbold_italic') format('svg');
    font-weight: bold;
    font-style: italic;

    }

    /* We're giving our font-families the same name, in order to simplify calling them in our style sheet. In this example we only need to reference "Alegreya Sans" and then specify its style or weight, as shown in our next steps. */

    body {
    font-family: 'Alegreya Sans';
    font-size: 100%;
    line-height: 135%; /* These attributes define the default font for the entire document */
    }
    h1 {
    /* We needn't declare a font-weight property, unless it's a value other than bold. */
    font-family: "Alegreya Sans";
    font-style: italic;
    margin: 0.7em 0 1em 0;
    }
    a {
    /* As we've declared or font-family in body, we need not redeclare it, unless we're changing fonts for an element, in this case, the anchor (a) element. */
    font-weight: bold;
    font-style: italic;
    /* We've declared Alegreya Sans, normal italic as our anchor font. */
    font-size: 105%;
    letter-spacing: 0.01em; /* This property opens the bold italic style up a little, making it easier to read at this size. */
    }

IMAGE sample web page showing @font-face rule in action.

Our sample page, showing three different font styles, each generated by an @font-face rule.

Conclusion

In this lesson we learned how to generate web fonts using Font Squirrel’s web-font generator, how to prepare them for web delivery and put them on our server.

We then learned how to put them on our server and call them using the @font-face rule using the source and optional format, font-style and font-weight properties.

Practice adding your own web fonts to your pages. Remember to use only properly licensed web fonts on your sites, or your client’s. Also remember you can mix and match web fonts from services such as Google Fonts with your own.

Link to your work in the comments section below. I’d love to see what you’ve done.

About the author

Gord taught the graphic design program at a private college for six years. He also wrote nineteen of the program's courses. After six years leading classes, he felt it was time to learn how to be a graphic designer again. In addition to graphic design, Gord's an accomplished writer. Digital painting and photography are two of his hobbies.

Share this post

3 Comments

  1. Meet Matt

    Hipster Ipsum is awsome! Thanks!

  2. Meet Matt

    Hipster Ipsum is awesome! Thanks!

Leave a Comment

Subscribe To Our Newsletter