Tailwind does not apply custom font family in production build

user_8401261 0
Viewed 1634

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.

tailwind-css vue.js css html javascript
1 Answers

If you're on Vue-CLI, I'd recommend adding the typeface via NPM for maintainability, and import it into your entry file (e.g. 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).

user_36345380
Related