oliverdavies.uk/source/_posts/2014-11-18-include-css-fonts-using-sass-each-loop.md

title	nav	description	slug	tags
Include CSS Fonts by Using a SASS each Loop	blog	How to use an SASS each loop to easily add multiple fonts to your CSS.	include-css-fonts-using-sass-each-loop	compass drupal-planet fonts sass

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