Skip to content

Instantly share code, notes, and snippets.

@samuel-holt
Created November 20, 2014 20:06
Show Gist options
  • Save samuel-holt/0298a03c76e2409c54a3 to your computer and use it in GitHub Desktop.
Save samuel-holt/0298a03c76e2409c54a3 to your computer and use it in GitHub Desktop.
Full font face generator mixin
// Set defaults in parameters...
@mixin generate-font-face($font-name, $sizes:false, $font-folder-name:false, $font-file-prefix: false, $font-file-suffix: "webfont", $font-name-separator:"-", $dir-separator:"/", $formats:(woff2, ttf, svg, eot)) {
$web-font-folder-name: $font-name;
@if $font-folder-name != false {
$web-font-folder-name: $font-folder-name;
}
// default font-file prefix
$web-font-file-name-prefix: $font-name;
@if $font-file-prefix != false {
$web-font-file-name-prefix: $font-file-prefix;
}
// Default (most commonly used sizes)
$font-sizes: (light, 200, normal),
(regular, 400, normal),
(bold, 700, normal);
@if $sizes != false {
$font-sizes: $sizes;
}
// Build font file name
$all-formats: (woff, woff2, ttf, otf, svg);
$eot-file: false;
@each $type, $weight, $style in $font-sizes {
@if NULL == $weight {
@if light == $type {
$weight: 200;
}
@else if regular == $type {
$weight: 400;
}
@else if bold == $type {
$weight: 700;
}
}
@if NULL == $style {
$style: normal;
}
$font-full-file-name: $web-font-folder-name + $dir-separator + $type + $dir-separator + $web-font-file-name-prefix + $font-name-separator + $type + $font-name-separator + $font-file-suffix;
$web-font-files: ();
$font-1: NULL;
$font-2: NULL;
$font-3: NULL;
@each $format in $all-formats {
$full-name: $font-full-file-name + ".#{$format}";
@if index($formats, $format) != false {
@if woff == $format or woff2 == $format {
$font-1: $full-name;
}
@else if ttf == $format or otf == $format{
$font-2: $full-name;
}
@else if svg == $format {
$font-3: $full-name;
}
}
}
@if index($formats, eot) {
$eot-file: "#{$font-full-file-name}.eot";
}
@include font-face(
$font-name,
font-files( $font-1, $font-2, $font-3 ),
$eot-file,
$weight,
$style
);
}
}
// Example implementations
@include generate-font-face("proxima-nova");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment