CODEWITHSUNDEEP
tailwind-css
pilotguy
pilotguy

Reputation: 687

Trouble with Typekit fonts in Tailwind

I'm trying to import TypeKit fonts into my Tailwind config. I have included the .css file like so in my index: https://use.typekit.net/kcz3fka.css. Inside my tailwind.config.cjs file I have the definition:

module.exports = {
  purge: ['index.html', 'src/**/*.tsx'],
  mode: 'jit',
  theme: {
    extend: {
      container: {
        center: true,
      },
      fontFamily: {
        display: ['"katarine-web"', ...theme.fontFamily.sans],
        body: ['"katarine-web"', ...theme.fontFamily.sans],
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
};

I've tried escaping the katarine name as well as with and without double quotes. Neither seem to work as expected. What should I be doing to ensure Katarine can be used?

Upvotes: 0

Views: 1699

Answers (1)

JsWizard
JsWizard

Reputation: 1749

try this,

module.exports = {
  purge: ['index.html', 'src/**/*.tsx'], // include your purge target files
  mode: 'jit',
  theme: {
    extend: { 
      container: {
        'center': true,
      },
      fontFamily: { // if you want extend 'katrarine-web', then just add them instead other originals.
        'display': ['katarine-web'],
        'body': ['katarine-web'],
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
};

also, check this Doc.

Happy coding :)

Upvotes: 1

Related Questions