4

I applied this answer exactly but my custom font class still doesn't work:

tailwind.config.js:

module.exports = {
  theme: {
    fontFamily: {
      "intro-regular": "intro-regular"
    },
    extend: {
      fontSize: {
        "10": "10px",
        "11": "11px"
      }
    }
  }
}

In assets/scss/fonts.scss:

@font-face {
  font-family: 'intro-regular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/intro/Intro-Regular.otf') format('opentype');
}

This should work, but when I try @apply intro-regular anywhere in my app I get this error:

The intro-black class does not exist

Any suggestion?

(also I don't even see the font being loaded in DevTools' network tab: regardless of Tailwind I would think that the font should at least load but it doesn't)

EDIT: more info on my setup

Import of my main.scss in nuxt.config.js:

css: [
  {
    src: '~/assets/scss/main.scss',
    lang: 'scss'
  }
],

And in main.scss:

@import 'fonts';

To install Nuxt/Tailwind I followed the docs to the letter. But is sometimes the case with Nuxt.js, things didn't turn out as they were supposed to and Nuxt did not create any tailwind.css file in the /assets folder.

drake035
  • 3,955
  • 41
  • 119
  • 229

3 Answers3

2

src: url('../fonts/intro/Intro-Regular.otf')

Should be:

src: url('~/assets/fonts/intro/Intro-Regular.otf')

Dharman
  • 30,962
  • 25
  • 85
  • 135
Nick Dawes
  • 2,089
  • 1
  • 13
  • 20
  • Thanks, that's what I had initially. I changed at some point during my struggle. But it does not solve my problem. Font still won't load and same error message... – drake035 Mar 05 '21 at 16:42
  • You mention you’ve imported the font in assets/scss/fonts.scss, but it isn’t clear how you’ve imported that file into your main css. Can you share? – Nick Dawes Mar 05 '21 at 16:48
  • How have you implemented tailwind with your nuxt app? Typically you would have a tailwind.css which imports the base, utility classes etc. That’s where you’d import your fonts.scss. Can you update again with more detail about how you’ve implemented tailwind into your app? – Nick Dawes Mar 05 '21 at 19:10
0

I'm not sure about the rest of the configuration, but to apply a specific font with Tailwind, the correct form is @apply font-intro-regular (prefixed with font).

As for the remaining part of the configuration, I do have this in ~/assets/scss/tailwind.scss

/* stylelint-disable scss/at-rule-no-unknown */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* stylelint-enable */

You could probably add a @import './fonts'; here if it still do not work.

And this in my nuxt.config.js file

buildModules: [
  [
    '@nuxtjs/tailwindcss',
    {
      cssPath: '~/assets/scss/tailwind.scss',
    },
  ],
]
kissu
  • 40,416
  • 14
  • 65
  • 133
  • 1
    Thanks! Adding `font-` before `intro-regular` in my `@apply` did the trick :) I didn't know we should put `font-` before the font name though, and even when knowing that I can't find it clearly explained in the docs! (SO wants me to wait 20h before I can award bounty) – drake035 Mar 07 '21 at 19:43
  • 1
    Usually, when you do have a key nested into a object, you need some kind of prefix for it (like `opacity`, `borderRadius` or `lineHeight`). It is also useful to know when you want to add your own keys. For the example, go to this page: https://v1.tailwindcss.com/docs/font-family#font-families There, you will see the default settings for `sans, serif, mono` and you can see those in action at the top of the page with their default behavior. `variants` are tricky in Tailwind tho ! (https://v1.tailwindcss.com/docs/configuring-variants) Alright for the bounty, waiting patiently. :) – kissu Mar 07 '21 at 22:00
0

should not use ("...") in the font name

module.exports = {
  theme: {
    fontFamily: {
     intro: ("intro-regular": "intro-regular")
    },
    extend: {
      fontSize: {
        "10": "10px",
        "11": "11px"
      }
    }
  }
}
Rian
  • 1