Skip to main content

Custom Fonts

This section will show you how to add custom fonts. Step one has been done but left it here for informational purposes.

Step One: Add Fonts​

  1. Create a new fonts/ directory inside src/
  2. Drop your .woff2 fonts into src/fonts/ (.woff2 has support in all browsers now! It's the only font type you'll need)

Step Two: Configure Webpack​

You will need to tell Webpack to copy the fonts over to the build/ directory.

  1. Add the following to the new CopyPlugin object:
// webpack.config.js
{
  from: '*.woff2',
  to: 'fonts/[path][name][ext]',
  context: path.resolve( process.cwd(), 'src/fonts' ),
},

The new CopyPlugin object should look similar to:

// webpack.config.js
new CopyPlugin( {
  patterns: [
    {
       from: '**/*.{jpg,jpeg,png,gif,svg}',
       to: 'images/[path][name].[ext]',
       context: path.resolve( process.cwd(), 'src/images' ),
    },
    {
       from: '*.woff2',
       to: 'fonts/[path][name].[ext]',
       context: path.resolve( process.cwd(), 'src/fonts' ),
    },
  ],
} ),
  1. Build. In your terminal, type npm run build and press enter. This should copy all of the fonts over to build/fonts/, making them available in the theme.

Step 3: Create _fonts.scss​

  1. Inside src/scss/global/ create a new file and name it _fonts.scss
  2. Add your @font-face declarations:

There is a scss mixin in place to generate the markup below, if wanted. Otherwise add @font-face however you'd like.

/* src/scss/base/_fonts.css */
@font-face {
  font-family: 'Droid Serif';
  src: local( 'Droid Serif' ), local( 'DroidSerif' ),
  url( '../fonts/DroidSerif.woff2' ) format( 'woff2' );
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Cabin;
  src: local( 'Cabin Regular' ), local( 'Cabin-Regular' ),
  url( '../fonts/Cabin-Regular.woff2' ) format( 'woff2' );
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
  1. Import _fonts.scss in scss/base/index.scss
/* scss/base/index.scss */
@import 'globals';
@import 'fonts';