Jump to the navigation menu

Include CSS Fonts by Using a SASS each Loop

How to use an @each loop in SASS to quickly include multiple font files within your stylesheet.

Using a file structure similar to this, organise your font files into directories, using the the font name for both the directory name and for the file names.

.
├── FuturaBold
│   ├── FuturaBold.eot
│   ├── FuturaBold.svg
│   ├── FuturaBold.ttf
│   └── FuturaBold.woff
├── FuturaBoldItalic
│   ├── FuturaBoldItalic.eot
│   ├── FuturaBoldItalic.svg
│   ├── FuturaBoldItalic.ttf
│   └── FuturaBoldItalic.woff
├── FuturaBook
│   ├── FuturaBook.eot
│   ├── FuturaBook.svg
│   ├── FuturaBook.ttf
│   └── FuturaBook.woff
├── FuturaItalic
│   ├── FuturaItalic.eot
│   ├── FuturaItalic.svg
│   ├── FuturaItalic.ttf
│   └── FuturaItalic.woff

Within your SASS file, start an @each loop, listing the names of the fonts. In the same way as PHP's foreach loop, each font name will get looped through using the $family variable and then compiled into CSS.

@each $family in FuturaBook, FuturaBold, FuturaBoldItalic, FuturaItalic {
  @font-face {
    font-family: #{$family};
    src: url('../fonts/#{$family}/#{$family}.eot');
    src: url('../fonts/#{$family}/#{$family}.eot?#iefix') format('embedded-opentype'),
         url('../fonts/#{$family}/#{$family}.woff') format('woff'),
         url('../fonts/#{$family}/#{$family}.ttf') format('truetype'),
         url('../fonts/#{$family}/#{$family}.svg##{$family}') format('svg');
    font-weight: normal;
    font-style: normal;
  }
}

When the CSS has been compiled, you can then use in your CSS in the standard way.

font-family: "FuturaBook";

Was this interesting?

Sign up here and get more like this delivered straight to your inbox every day.

About me

Picture of Oliver

I'm an certified Drupal Triple Expert with 18 years of experience, a Drupal core contributor, public speaker, live streamer, and host of the Beyond Blocks podcast.