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