Drupal 8: Using Custom Fonts in a custom theme with Sass only

This is one of many ways (i guess) that you can embed custom (or google, etc) fonts into your theme using only sass.

First, let's see how the theme folders structure looks like in web/custom/theme/demo/

• Sass files are located here: custom/theme/demo/src/sass (this is where all your sass files - .scss are).
• Compiled css files are located here: custom/theme/demo/assets/css (this is where all your css files - .css are).
• Fonts files (.eot, .svg, .ttf, .woff, .woff2 etc) are located here: custom/theme/demo/assets/fonts.

In custom/theme/demo/src/sass, i have a custom/theme/demo/src/sass/base/_fonts.scss that looks like this

@font-face {
    font-family: 'CF Asty Std';
    src: url('../fonts/CFAstyStd-Book.eot');
    src: url('../fonts/CFAstyStd-Book.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CFAstyStd-Book.woff2') format('woff2'),
        url('../fonts/CFAstyStd-Book.woff') format('woff'),
        url('../fonts/CFAstyStd-Book.ttf') format('truetype'),
        url('../fonts/CFAstyStd-Book.svg#CFAstyStd-Book') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CF Asty Std';
    src: url('../fonts/CFAstyStd-Medium.eot');
    src: url('../fonts/CFAstyStd-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CFAstyStd-Medium.woff2') format('woff2'),
        url('../fonts/CFAstyStd-Medium.woff') format('woff'),
        url('../fonts/CFAstyStd-Medium.ttf') format('truetype'),
        url('../fonts/CFAstyStd-Medium.svg#CFAstyStd-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'CF Asty Std';
    src: url('../fonts/CFAstyStd-Bold.eot');
    src: url('../fonts/CFAstyStd-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CFAstyStd-Bold.woff2') format('woff2'),
        url('../fonts/CFAstyStd-Bold.woff') format('woff'),
        url('../fonts/CFAstyStd-Bold.ttf') format('truetype'),
        url('../fonts/CFAstyStd-Bold.svg#CFAstyStd-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'CF Semplice Pro';
    src: url('../fonts/CFSemplicePro-Bold.eot');
    src: url('../fonts/CFSemplicePro-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CFSemplicePro-Bold.woff2') format('woff2'),
        url('../fonts/CFSemplicePro-Bold.woff') format('woff'),
        url('../fonts/CFSemplicePro-Bold.ttf') format('truetype'),
        url('../fonts/CFSemplicePro-Bold.svg#CFSemplicePro-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

The path is relative to the custom/demo theme folder and usually it is where the assets/css folder is. So since the fonts files are located here: web/themes/custom/demo/assets/fonts and the css files are located here web/themes/custom/demo/assets/css. That means that when you run npm run build for example the assets/css folder will contain the updated or new .css files from the compiled .scss files and they will match with the relative fonts path at ../fonts (demo/assets/fonts and demo/assets/css are on the same level).

Now moving forward with declaring some sass font variables we can proceed like this.

In your _variables.scss file add something like this (replace correct font names etc with yours).

// Typography
//
// Font, families, variants etc

$font-family-sans-serif: 'CF Asty Std', sans-serif !default;
$font-family-monospace:  'CF Semplice Pro', sans-serif !default;
$font-family-primary: 'CF Asty Std', sans-serif;
$font-family-secondary: 'CF Semplice Pro', sans-serif;
$font-family-base: $font-family-primary !default;

And then in your elements.scss for example you can finally use the font family you want like this:

body {
  font-family: $font-family-primary;
}
// Headings
// -----------------------------------------------------------------------------
h1, h2, h3, h4, h5, h6 {
  font-family: $font-family-secondary;
  font-weight: bolder;
}