Tailwind does not apply custom font family in production build

Question

I am using Vue with Tailwind right now.

Here is my current Tailwind config:

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  purge: [],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {},
  plugins: [],
}

I am using the Inter var font, because on OSX systems the default font weights do not work. Right now, I want to build this project, but in the production version it does not apply the correct font family. I've tried to import the font family via a html link and css import, but neither of those worked.

Answer 1

If you're on Vue-CLI, I'd recommend adding the typeface via NPM for maintainability, and import it into your entry file (eg main.js ). This package will take care of referencing and importing the webfont(s) for you, so there's no need to create additional CSS anymore.

Installing the font

npm i typeface-inter

Importing it

import Vue from 'vue';
import 'typeface-inter';
// ...

And of course, you'll still need to extend the font-family (or simply adding it to the list will work too).