CSS Front-End Development SASS

Authored by Dustin Horton


Useful SASS Mixins: @font-face Webfonts

Leveraging a SASS each loop, you can declare an unlimited number of webfonts in just a few lines.

Just replace font-1, font-2, etc. with your webfonts. Do note that this mixin requires the font file name to be the same as the name you use in your font-family declarations.

I’ll then use a mixin to cleanly implement the webfonts.

For more details on the <code>@font-face</code> syntax, check out this old-but-relevant post on the Font Spring blog.

  • Rpearce

    This is great! If you’d like some more mixins that take care of some work for you, checkout

  • David Turner

    I have a similar mixin, though I need to call mine per font, rather than looping though anything. One benefit I have found that you can then set variables for the font style and weight of a font… handy if you happen to need the italic or bold versions for a project.

  • Alex

    There is a little mistake in your code.
    At line 4 ending of each loop, there must be ; instead ,

    • dustinhorton

      Thanks for catching that Alex. Fixed.