Created
          November 20, 2014 20:06 
        
      - 
      
- 
        Save samuel-holt/0298a03c76e2409c54a3 to your computer and use it in GitHub Desktop. 
    Full font face generator mixin
  
        
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
  | // 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