CODEWITHSUNDEEP
tailwind-css
Mikelgo
Mikelgo

Reputation: 575

tailwindcss: add font-face in plugin

I try to include some font faces into a tailwind-preset I want to use across multiple projects.

In the documentation it is only described how to define font-faces within the base layer of a css file, see here: https://tailwindcss.com/docs/adding-base-styles#font-face-rules.

However to include it in a distributable preset the way to go (from my knowledge), is to include it in a plugin. However I do not get what is the problem.

My approach is the following:

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


module.exports = {
  prefix: '',
  mode: 'jit',
  purge: {
    content: [
      './src/**/*.{html,ts,css,scss,sass,less,styl}',
    ]
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        sans: ['myfont', ...defaultTheme.fontFamily.sans]
      },
    }
  },
  variants: {
    extend: {},
  },
  plugins: [ plugin(function ({ addBase}) {
    const fonts = {
      '@font-face': [
        {
          fontFamily: 'My Font',
          fontStyle: 'normal',
          fontWeight: 400,
          src:
            'url("./fonts/my-font.woff") format("woff");'
        },
      ]
    };
    addBase(fonts);
  })],
};

Upvotes: 2

Views: 1337

Answers (1)

person_v1.32
person_v1.32

Reputation: 3167

Your plugin looks correct, but the fontFamily defined in the @font-face rule should be the same as the fontFamily defined in the font-family CSS rule. Try changing myfont to My Font in your theme extension config.

See this Tailwind Play REPL for an example.

Upvotes: 5

Related Questions