Gerillass
v2.1.0Type: Mixin
@include font-face();
* You can call mixins with or without the gls- namespace (e.g. @include gls-font-face();).
The Font Face Sass mixin helps you generate a cross-browser compatible @font-face declaration.
Arguments
| Name | Type | Description |
|---|---|---|
$font-family | string | Sets the name of the font-family. |
$file-path | string | Sets the path and the name of the font file. The file name must be written without the extension. |
$font-style | string | Sets the font-style property. The default value is normal. If there is an italic version of the font, you can set the value to italic or oblique. |
$font-weight | number | Sets the weight of the font. The default value is 400. Accepts 100, 200, 300, 400, 500, 600, 700, 800, and 900. |
$file-formats | string | list | Sets the font file formats you want to include. The default value is eot woff2 woff ttf svg. |
To learn more about the font-weight property values, check out the [links](#related-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");@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);@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: 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);@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 the $font-style and $font-weight arguments, the $font-weight value should always come last, unless you also pass a value for $file-formats.
@include font-face("Fanwood Text", "fonts/fanwood-text/fanwood-text-bold-italic", italic, 700);@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;
}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);@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 $font-family, $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);@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 passing the arguments by position, try named 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
);@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 changing the order of the arguments. Whatever order you use, the result is 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",
);@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;
}@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 you want to convert into a web font (embeddable with @font-face), try Font Squirrel's Webfont Generator.