Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
@font-face Sass + Compass

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.
@tobiasmuecksch

This comment has been minimized.

Copy link

@tobiasmuecksch tobiasmuecksch commented Mar 13, 2016

👍 Thank you.

@Xosmond

This comment has been minimized.

Copy link

@Xosmond Xosmond commented Jul 12, 2016

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment