Skip to content

Instantly share code, notes, and snippets.

@graemeboyd
Last active October 1, 2015 09:35
Show Gist options
  • Save graemeboyd/05002c8a602d954c5d59 to your computer and use it in GitHub Desktop.
Save graemeboyd/05002c8a602d954c5d59 to your computer and use it in GitHub Desktop.
Choosing the source urls for a set of font formats in SASS
$support-ie8: true !default;
$use-opentype: true !default;
// A function to return a list of values associated with a list of keys
@function map-select-values($map, $selection) {
$values: ();
@each $key in $selection {
$values: append($values, map-get($map, $key));
}
@return $values;
}
@function supported-font-sources($sources) {
$chosen-formats: ();
@if $support-ie8 {
$chosen-formats: append($chosen-formats, embedded-opentype);
}
@if $use-opentype {
$chosen-formats: join($chosen-formats, otf-woff otf-woff2 opentype);
} @else {
$chosen-formats: join($chosen-formats, ttf-woff ttf-woff2 truetype);
}
@return map-select-values($sources, $chosen-formats);
}
/* Extra Light (200) */
@font-face {
font-family: 'Source Sans Pro';
font-weight: 200;
font-style: normal;
font-stretch: normal;
src: supported-font-sources((
embedded-opentype: url('../fonts/SourceSansPro/EOT/SourceSansPro-ExtraLight.eot') format('embedded-opentype'),
ttf-woff2: url('../fonts/SourceSansPro/WOFF2/TTF/SourceSansPro-ExtraLight.ttf.woff2') format('woff2'),
ttf-woff: url('../fonts/SourceSansPro/WOFF/TTF/SourceSansPro-ExtraLight.ttf.woff') format('woff'),
otf-woff2: url('../fonts/SourceSansPro/WOFF2/OTF/SourceSansPro-ExtraLight.otf.woff2') format('woff2'),
otf-woff: url('../fonts/SourceSansPro/WOFF/OTF/SourceSansPro-ExtraLight.otf.woff') format('woff'),
opentype: url('../fonts/SourceSansPro/OTF/SourceSansPro-ExtraLight.otf') format('opentype'),
truetype: url('../fonts/SourceSansPro/TTF/SourceSansPro-ExtraLight.ttf') format('truetype')
));
}
// A function to return a list of values associated with a list of keys
@function map-select-values($map, $selection) {
$values: ();
@each $key in $selection {
$values: append($values, map-get($map, $key));
}
@return $values;
}
$chosen-formats: woff woff2;
$formats: (embedded-opentype: url('../fonts/SourceSansPro/EOT/SourceSansPro-ExtraLight.eot') format('embedded-opentype'),
woff2: url('../fonts/SourceSansPro/WOFF2/TTF/SourceSansPro-ExtraLight.ttf.woff2') format('woff2'),
woff: url('../fonts/SourceSansPro/WOFF/TTF/SourceSansPro-ExtraLight.ttf.woff') format('woff'),
opentype: url('../fonts/SourceSansPro/OTF/SourceSansPro-ExtraLight.otf') format('opentype'),
truetype: url('../fonts/SourceSansPro/TTF/SourceSansPro-ExtraLight.ttf') format('truetype'));
@font-face {
src: map-select-values($formats, $chosen-formats);
}
// CSS Output
@font-face {
src: url("../fonts/SourceSansPro/WOFF/TTF/SourceSansPro-ExtraLight.ttf.woff") format("woff"),
url("../fonts/SourceSansPro/WOFF2/TTF/SourceSansPro-ExtraLight.ttf.woff2") format("woff2");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment