Adding custom fonts

Host your fonts yourself or use a third party—and then add those fonts to your WordPress theme

Whether self-hosting or using an external service, you’re probably going to want to add your custom fonts to your Tailwind configuration file, so let’s begin there!

Using custom fonts in Tailwind

Tailwind’s own documentation has an excellent section on customizing the default font, the most important part of which is the following snippet:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'sans': ['"Proxima Nova"', ...defaultTheme.fontFamily.sans],
      },
    }
  }
}Code language: JavaScript (javascript)

The first thing to notice about the above snippet is this line added to the top of your tailwind.config.js file:

const defaultTheme = require('tailwindcss/defaultTheme')Code language: JavaScript (javascript)

This gives you all of Tailwind’s default theme properties to work with. With that, you can add a fontFamily key with one or more lines like this one:

'sans': ['"Proxima Nova"', ...defaultTheme.fontFamily.sans],Code language: JavaScript (javascript)

This line overrides the default font-sans class, adding your custom font to the beginning. You could do the same for serif or mono as well, and you could also create your own font family utilities like display or slab.

Using external fonts (like Google Fonts)

You can add fonts from providers like Google Fonts using the methods you would use on any other WordPress site. WPBeginner has a solid outline of the various approaches.

Self-hosting fonts

Whenever possible, I prefer to self-host web fonts. On too many client sites with third-party fonts, I’ve found those fonts ended up being the slowest part of the website, so when I can, I like to control exactly how they’re loaded.

Generally, providers of self-hosted web fonts will supply CSS files with the @font-face at-rules you’ll use to add the fonts to your site.

_tw includes the ./tailwind/custom/fonts.css file to act as a destination for those at-rules.

Here’s an example of one:

@font-face {
	font-family: "Source Code Pro";
	src: url("fonts/sourcecodepro-regular.woff2") format("woff2"),
		url("fonts/sourcecodepro-regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
}Code language: CSS (css)

In this case, the fonts themselves live in ./theme/fonts. (You could put them somewhere else if you wanted; either way, you’ll need to create a folder for them yourself. That folder should be inside the ./theme folder, nested as deeply as you like.) CSS generated by Tailwind will be created at ./theme/style.css, so the path to the fonts should be relative to that file. Here, url("fonts/sourcecodepro-regular.woff2") does the trick.