Css – How to use custom fonts with TailwindCSS and NuxtJS

cssfontsnuxtjstailwind-cssvue.js

So I'm building a website with NuxtJS using Tailwind CSS for my styles. I'm using the @nuxtjs/tailwindcss module.

The issue is that my fonts don't seem to be loading on the browser. The correct font-family is still applied by the CSS as you can see in the devtools screenshot, but the browser still renders my text with Times New Roman.

—Devtools Screenshot

My fonts files are .ttf files stored in a /assets/fonts/ folder in my project's root directory.

My tailwind.css file looks like this 

@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@font-face {
  font-family: 'Montserrat';
  font-weight: 400;
  src: url('../fonts/Montserrat-Regular.ttf') format('ttf');
}

@font-face {
  font-family: 'Montserrat';
  font-weight: 700;
  src: url('../fonts/Montserrat-Bold.ttf') format('ttf');
}

@font-face {
  font-family: 'Montserrat';
  font-weight: 900;
  src: url('../fonts/Montserrat-Black.ttf') format('ttf');
}

and my tailwind.config.js looks like this

module.exports = {
  theme: {
    fontFamily: {
      sans: ['Montserrat'],
      serif: ['Montserrat'],
      mono: ['Montserrat'],
      display: ['Montserrat'],
      body: ['Montserrat']
    },
    // Some more irrelevant theme customization
 },
  variants: {},
  plugins: []
}

I wanted to completly override Tailwind's base fonts so I didn't use extend and I plan on cleaning this up and using an other font for some texts once I figure out how to properly do this.

My guts tell me that Tailwind is not the problem here since the Devtools actually show Montserrat as the computed font, and the webpack build does not throw any error.

I've tried both answers featured in this related question, the accepted one actually being my implementation, but no good result so far.

I'd be very grateful if somebody could help me !

EDIT : I created a Github repo reproducing the issue, it can be found here and all steps to reproduce are in the README.MD

Best Answer

It is not an issue with Tailwind, Vue, or Nuxt - just in CSS.

You have wrong the format value in @font-face src. "ttf" is an extension, not a format name. It should be "truetype" instead. Actually, for woff or svg, the extension is the same as the format name, so that's why it can be confusing with "ttf" and "truetype".

So just replace:

src: url('../fonts/Montserrat-Regular.ttf') format('ttf');

With:

src: url('../fonts/Montserrat-Regular.ttf') format('truetype');

Or remove format because it will work without it.

src: url('../fonts/Montserrat-Regular.ttf');

WOFF

Also, it would be a good idea to use newer and smaller formats: woff and woff2.

src:
  url('../fonts/Montserrat-Regular.ttf') format('truetype'),
  url('../fonts/Montserrat-Regular.woff2') format('woff2'),
  url('../fonts/Montserrat-Regular.woff') format('woff')

I personally use only woff and woff2, since it is supported in all major browsers. Based on caniuse coverage, for now is > 98%, so in my opinion, there is no reason to use TTF anymore.

src:
  url('../fonts/Montserrat-Regular.woff2') format('woff2'),
  url('../fonts/Montserrat-Regular.woff') format('woff')
Related Topic