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
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
);
$source-sans-pro: 'Source Sans Pro', Helvetica, sans-serif;
h1 {
font-family: $source-sans-pro;
}
- Set
fonts_dir = "webfonts"
in yourconfig.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.