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 commented Mar 13, 2016

👍 Thank you.

@Xosmond

This comment has been minimized.

Copy link

Xosmond commented Jul 12, 2016

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.