Using Custom Fonts

Quickly add custom font files and integrate them with a simple SASS mixin.

Working with fonts can be a pain, particularly when editing font-face rules. Slate makes this especially easy. By using the power of a custom SASS mixin, you can set this up in no time at all.

Font Face Mixin

Open up /src/partials/_typography.scss. This file is a boiler plate for your sites typography and is meant to be edited to better suit your design. It simply provides a good starting point.

At the very least you need just need to declare the following:

@include fontface("Montserrat Black", "Montserrat-Black");

The first parameter is the name of the font and the second is the filename without the extension. This will output the following CSS:

@font-face {
font-family: "Montserrat Black";
font-weight: normal;
font-style: normal;
src: url("/assets/fonts/Montserrat-Black.eot");
src: url("/assets/fonts/Montserrat-Black.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/Montserrat-Black.woff") format("woff"), url("/assets/fonts/Montserrat-Black.ttf") format("truetype"), url("/assets/fonts/Montserrat-Black.svg#Montserrat Black") format("svg"); }

For a little more control, you can also set the font-weight and font-style directly on the mixin itself:

@include fontface("Montserrat Light", "Montserrat-Light", $thin, normal);

Thats all there is to it! You can then set your own font-stack as a variable using this family, and also using the built-in stacks as a fall back.

$montserrat-black: "Montserrat Black", $gillsans;

Full Example

There are some extra options you pass on the mixin. The below is an example of setting the font family name, the the font file name, font weight, font style, and lastly the font file types to use.

@include fontface("IM FELL English", "IMFeENrm28P", $extrabold, normal, eot woff woff2 ttf svg);

The above will yield the following CSS:

    @font-face {
      font-family: "IM FELL English";
      font-weight: 700;
      font-style: normal;
      src: url("/assets/fonts/IMFeENrm28P.eot");
      src: url("/assets/fonts/IMFeENrm28P.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/IMFeENrm28P.woff2") format("woff2"), url("/assets/fonts/IMFeENrm28P.woff") format("woff"), url("/assets/fonts/IMFeENrm28P.ttf") format("truetype"), url("/assets/fonts/IMFeENrm28P.svg#IM FELL English") format("svg"); }

Built with the Best

Slate was built by Hash&Salt, a company who loves building for the internet. Using the very best in industry leading software and practices honed over the last 20 years in the industry. You're in good hands.