@font-face Sass + Compass

gistfile1.md

http://compass-style.org/reference/compass/css3/font_face/#mixin-font-face

Setting weights and styles http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration

Examples

Source Sans Pro Regular

@include font-face(
  "Source Sans Pro",
  inline-font-files(
    'source-sans-pro/SourceSansPro-Regular-webfont.woff', woff,
    'source-sans-pro/SourceSansPro-Regular-webfont.ttf', ttf,
    'source-sans-pro/SourceSansPro-Regular-webfont.svg', svg),
  'source-sans-pro/SourceSansPro-Regular-webfont.eot',
  normal, // font-weight
  normal  // font-style
);

Source Sans Pro Bold

@include font-face(
  "Source Sans Pro Bold",
  inline-font-files(
    'source-sans-pro/SourceSansPro-Bold-webfont.woff', woff,
    'source-sans-pro/SourceSansPro-Bold-webfont.ttf', ttf,
    'source-sans-pro/SourceSansPro-Bold-webfont.svg', svg),
  'source-sans-pro/SourceSansPro-Bold-webfont.eot',
  700 // font-weight
);

Source Sans Pro Italic

@include font-face(
  "Source Sans Pro Italic",
  inline-font-files(
    'source-sans-pro/SourceSansPro-It-webfont.woff', woff,
    'source-sans-pro/SourceSansPro-It-webfont.ttf', ttf,
    'source-sans-pro/SourceSansPro-It-webfont.svg', svg),
  'source-sans-pro/SourceSansPro-It-webfont.eot',
  normal, // font-weight
  italic  // font-style
);

Font-family variable

$source-sans-pro: 'Source Sans Pro', Helvetica, sans-serif;

h1 {
  font-family: $source-sans-pro;
}

Notes

• Set fonts_dir = "webfonts" in your config.rb file so you can use relative paths above.
• Font type order: woff, opentype/truetype, svg, eot
• Notice that the .eot font is set apart from the others.

👍 Thank you.

Thanks