Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Include CSS Fonts by Using a SASS each Loop

Parent Feed: 

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

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web