Custom Fonts

Introduction

This section will show you how to add custom fonts to wd_s 2.0+.

---

Step One: Add Fonts

1. Create a new fonts/ directory inside src/
2. Drop your .woff2 fonts into src/fonts/ (.woff2 is support in all browsers now! It's the only font type you 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 CopyWebpackPlugin object:

// webpack.config.js
{
  from: '*.woff2',
  to: 'fonts/[path][name][ext]',
  context: path.resolve( process.cwd(), 'src/fonts' ),
},

The final new CopyWebpackPlugin object should look similar to:

// webpack.config.js
new CopyWebpackPlugin( {
  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' ),
    },
  ],
} ),

2. 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/base/ create a new file and name it _fonts.scss
2. Add your @font-face declarations:

/* 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;
}

3. Import _fonts.scss in scss/base/index.scss

/* scss/base/index.scss */
@import 'globals';
@import 'alignment';
@import 'headings';
@import 'fonts';

---

Step 4: Configure TailwindCSS

TailwindCSS supports custom font declarations. See https://tailwindcss.com/docs/font-family#font-families for more information.

1. Open tailwind.config.js
2. Add your fontFamily object to the theme object, like the example below:

// tailwind.config.js
module.exports = {
  theme: {
    fontFamily: {
      sans: [ 'Cabin', 'sans-serif' ],
      serif: [ 'Droid Serif', 'serif' ],
    },

---

Wrap Up

You should now be able to use custom fonts! Don't forget to check out the official TailwindCSS docs for more usage and examples.

---