Font Face

    Type: Mixin
    @include font-face();
    * You can call mixins with or without gls- namespace (e.g. @include gls-font-face();).
    Font Face Sass mixin helps you to generate a cross-browser compatible @font-face decleration.

    Important: The mixin must be called at the root level of your style sheet.
    Github Source Code

    Arguments

    NameTypeDescription
    $font-familystring

    Sets the name of the font-family.

    $file-pathstring

    Sets the path and the name of the font file. The file name must be written without the extension.

    $font-stylestring

    Sets the font-style property. the default value is set to normal. If there is an italic version of the font you can set the value to italic or oblique.

    $font-weightnumber

    Sets the weight of the fonts. The default value is set to 400. Accepts 100, 200, 300, 400, 500, 600, 700, 800, 900.

    $file-formatsstring | list

    Sets the font file formats that you would like to include. The default value is set to eot woff2 woff ttf svg.

    * To learn more about the font-weight property values checkout the links at the end of the article.

    Examples

    Let’s call the mixin and pass values for the required arguments: $font-family and $file-path.

    @include font-face("Fanwood Text", "fonts/fanwood-text/fanwood-text-regular");
    //CSS Output
@font-face {
  font-family: "Fanwood Text";
  src: url("fonts/fanwood-text/fanwood-text-regular.eot");
  src: url("fonts/fanwood-text/fanwood-text-regular.eot?#iefix") format("embedded-opentype"), 
       url("fonts/fanwood-text/fanwood-text-regular.woff2") format("woff2"), 
       url("fonts/fanwood-text/fanwood-text-regular.woff") format("woff"), 
       url("fonts/fanwood-text/fanwood-text-regular.ttf") format("truetype"), 
       url("fonts/fanwood-text/fanwood-text-regular.svg#FanwoodText") format("svg");
  font-style: normal;
  font-weight: 400;
}

    Now let’s add the italic version of the family.

    @include font-face("Fanwood Text", "fonts/fanwood-text/fanwood-text-regular", italic);
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

    //CSS Output
@font-face {
  font-family: "Fanwood Text";
  src: url("../fonts/fanwood-text/fanwood-text-v9-latin-italic.eot");
  src: url("../fonts/fanwood-text/fanwood-text-v9-latin-italic.eot?#iefix") format("embedded-opentype"),
       url("../fonts/fanwood-text/fanwood-text-v9-latin-italic.woff2") format("woff2"), 
       url("../fonts/fanwood-text/fanwood-text-v9-latin-italic.woff") format("woff"), 
       url("../fonts/fanwood-text/fanwood-text-v9-latin-italic.ttf") format("truetype"), 
       url("../fonts/fanwood-text/fanwood-text-v9-latin-italic.svg#FanwoodText") format("svg");
  font-style: italic;
  font-weight: 400;
}

    Now let’s add the bold version of the Fanwood Text font-family (if there is one) by passing 700 for the $font-weight argument.

    @include font-face("Fanwood Text", "fonts/fanwood-text/fanwood-text-bold", 700);
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

    //CSS Output
@font-face {
  font-family: "Fanwood Text";
  src: url("fonts/fanwood-text/fanwood-text-bold.eot");
  src: url("fonts/fanwood-text/fanwood-text-bold.eot?#iefix") format("embedded-opentype"), 
       url("fonts/fanwood-text/fanwood-text-bold.woff2") format("woff2"), 
       url("fonts/fanwood-text/fanwood-text-bold.woff") format("woff"), 
       url("fonts/fanwood-text/fanwood-text-bold.ttf") format("truetype"), 
       url("fonts/fanwood-text/fanwood-text-bold.svg#FanwoodText") format("svg");
  font-style: normal;
  font-weight: 700;
}

    If you pass values for both $font-style and $font-weight arguments, the value for $font-weight argument should always be at the end unless you pass values for the $file-formats.

    @include font-face("Fanwood Text", "fonts/fanwood-text/fanwood-text-bold-italic", italic, 700);
    //CSS Output
@font-face {
  font-family: "Fanwood Text";
  src: url("fonts/fanwood-text/fanwood-text-bold-italic.eot");
  src: url("fonts/fanwood-text/fanwood-text-bold-italic.eot?#iefix") format("embedded-opentype"), 
       url("fonts/fanwood-text/fanwood-text-bold-italic.woff2") format("woff2"), 
       url("fonts/fanwood-text/fanwood-text-bold-italic.woff") format("woff"), 
       url("fonts/fanwood-text/fanwood-text-bold-italic.ttf") format("truetype"), 
       url("fonts/fanwood-text/fanwood-text-bold-italic.svg#FanwoodText") format("svg");
  font-style: italic;
  font-weight: 700;
}
    Things are getting trickier when you want to pass a value for $file-formats. In the below examples you can see the ways to pass a value for $file-formats.

    Suppose you only have three file formats: woff2, woff, and ttf.

    @include font-face("Fanwood Text", "fonts/fanwood-text/fanwood-text-regular", woff2 woff ttf);
    //CSS Output
@font-face {
  font-family: "Fanwood Text";
  src: url("fonts/fanwood-text/fanwood-text-regular.woff2") format("woff2"), 
       url("fonts/fanwood-text/fanwood-text-regular.woff") format("woff"), 
       url("fonts/fanwood-text/fanwood-text-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
}

    If you want to pass values for all the arguments the order must be like this: $font-name, $file-path, font-style, $font-weight, $file-formats like in the example below.

    @include font-face("Fanwood Text", "fonts/fanwood-text/fanwood-text-bold-italic", italic, 700, woff2 woff);
    //CSS Output
@font-face {
  font-family: "Fanwood Text";
  src: url("fonts/fanwood-text/fanwood-text-bold-italic.woff2") format("woff2"), 
       url("fonts/fanwood-text/fanwood-text-bold-italic.woff") format("woff");
  font-style: italic;
  font-weight: 700;
}

    If you are having trouble with passing the arguments by their position try named arguments.

    Tip: Do you know what’s beautiful about named arguments? They’re order-independent, therefore so useful in such cases where it is difficult to stick to the order of arguments.
    @include font-face (
  $font-family: "Fanwood Text", 
  $file-path: "fonts/fanwood-text/fanwood-text-bold-italic",
  $font-style: italic, 
  $font-weight: 700,
  $file-formats: eot woff2 woff
);
    //CSS Output
@font-face {
  font-family: "Fanwood Text";
  src: url("fonts/fanwood-text/fanwood-text-bold-italic.eot");
  src: url("fonts/fanwood-text/fanwood-text-bold-italic.eot?#iefix") format("embedded-opentype"), 
       url("fonts/fanwood-text/fanwood-text-bold-italic.woff2") format("woff2"), 
       url("fonts/fanwood-text/fanwood-text-bold-italic.woff") format("woff");
  font-style: italic;
  font-weight: 700;
}

    Try to change the order of the arguments (whatever the order you use, the result will be the same).

    @include font-face (
  $font-weight: 700,
  $font-style: italic,
  $file-formats: eot woff2 woff, 
  $font-family: "Fanwood Text",
  $file-path: "fonts/fanwood-text/fanwood-text-bold-italic",
);
    //CSS Output
@font-face {
  font-family: "Fanwood Text";
  src: url("fonts/fanwood-text/fanwood-text-bold-italic.eot");
  src: url("fonts/fanwood-text/fanwood-text-bold-italic.eot?#iefix") format("embedded-opentype"), 
       url("fonts/fanwood-text/fanwood-text-bold-italic.woff2") format("woff2"), 
       url("fonts/fanwood-text/fanwood-text-bold-italic.woff") format("woff");
  font-style: italic;
  font-weight: 700;
}

    Now let’s use the @content directive to pass a content block into the mixin.

    @include font-face ("Fanwood Text", "fonts/fanwood-text/fanwood-text-regular") {
  font-display: fallback;
}
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

    //CSS Output
@font-face {
  font-family: "Fanwood Text";
  src: url("fonts/fanwood-text/fanwood-text-regular.eot");
  src: url("fonts/fanwood-text/fanwood-text-regular.eot?#iefix") format("embedded-opentype"),
       url("fonts/fanwood-text/fanwood-text-regular.woff2") format("woff2"),
       url("fonts/fanwood-text/fanwood-text-regular.woff") format("woff"),
       url("fonts/fanwood-text/fanwood-text-regular.ttf") format("truetype"),
       url("fonts/fanwood-text/fanwood-text-regular.svg#FanwoodText") format("svg");
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
}

    If you don’t have all the font varieties, or you have a font and you want to convert it to a web font (@font-face embeddable), try Font Squirrel‘s Webfont Generator.

    Jan 21, 2022 Edit this page