@font-face and font variations

So you browsed the web and found a really nice font set to add to your web page and you might wonder:

How can I import all the variations of a single font family into my project?

If it is indeed the case, you will find the answer below! Else you can still wander around :)

Audience

Anybody interested in web development, with the basic knowledge of HTML and CSS.

Objective

Import and display different variations of a same font family.

Targeted / tested browsers

• Chrome (latest)
• Firefox (latest)
• Chrome for Android (latest)

Techniques used

• CSS @font-face

References

• MDN: CSS @font-face
• CSS Tricks: Using @font-face

Tutorial

Font face

You can import font using the @font-face in your CSS:

@font-face {
    font-family: 'YourSuperFont';
    font-style:  'theStyle';
    font-weight: 'theWeight';
    src: url('path/to/your/superFont.woff2') format('woff2'),
         url('path/to/your/superFont.woff') format('woff');
}

Then you can use the font to style the element of your choice:

p {
    font-family: 'YourSuperFont';
    font-style:  'theStyle';
    font-weight: 'theWeight';
}

Notes: As obvious as it seems, YourSuperFont, theStyle and theWeight are not proper values ;)

The support for font types varies with older browsers, see support for Woff2, Woff.

Font variations

One font can have multiple variations changing aspects like font weight, font style, etc. Each variation should be described using @font-face with the same font-family.

@font-face {
    font-family: 'YourSuperFont';
    src: url('path/to/your/superFont-normal.woff2') format('woff2'),
         url('path/to/your/superFont-normal.woff')  format('woff');
}

@font-face {
    font-family: 'YourSuperFont';
    font-style:  italic;
    src: url('path/to/your/superFont-italic.woff2') format('woff2'),
         url('path/to/your/superFont-italic.woff')  format('woff');
}

@font-face {
    font-family: 'YourSuperFont';
    font-weight: 700;
    src: url('path/to/your/superFont-bold.woff2') format('woff2'),
         url('path/to/your/superFon-boldt.woff')  format('woff');
}

It becomes very tedious to write the @font-face for all variations.

One way to overcome the issue is to get the font from a service like Google Fonts. Using a compiler for CSS will help to reduce the tedious part of CSS… tremendously.

DRY

DRY, DRY, DRY! (sound of a crow screaming: “Winter is coming!”)

Hmmm, not exactly no. Although yes, it’s definitely colder these days :D

In the case it is the first time you see it, DRY stands for Don’t Repeat Yourself. Easier to say than to do in this case and for CSS in general.

If you want to reduce the repetition aspect of CSS, you could use a language like Sass which allows mixin (a kind of function to generate CSS). Your stylesheet would then need to be compiled in order to be used in the HTML page.

Here’s a quick mixin implementation to import the font:

@mixin addFontFace($fontFamily, $fontFilePath, $style:normal, $weight:normal) {
  @font-face {
    font-family: $fontFamily;
    font-style: $style;
    font-weight: $weight;
    src: url('#{$fontFilePath}.woff2') format('woff2'),
         url('#{$fontFilePath}.woff')  format('woff');
  }
}

@include addFontFace('YourSuperFont', 'path/to/your/superFont-normal');
@include addFontFace('YourSuperFont', 'path/to/your/superFont-italic', italic);
@include addFontFace('YourSuperFont', 'path/to/your/superFont-bold',   normal, 700);

In the example above, the mixin receives the font-family, font file path and format, font-style and font-weight. font-style and font-weight are left as last parameters as they have default values (Sass specification). The repetition are reduced but we can do even better, see SASS Font-face post for more details.

Demo

This demo uses the mixin presented in the SASS Font-face post to import the font Montserrat and its 18 styles!

Common issues

Font not rendered

• Check out the font file is found by the browser. Open the browser developer tools and check the network tab. The font file should not show 404.
• The font family name should match.
• Check the @font-face is on top of your stylesheet.

Conclusion

Glad you reached this part!

I hope at this point your font is showing correctly. If not, make sure to check out the common issues section.