Loading custom fonts in Nuxt/Tailwind Project

Question

Hi everybody and sorry my english.

I have created a nuxt.js project with Tailwind. I´d like to custom my font family, so I downloaded some font files from Google Fonts. I have been reading Tailwind docs, but i can´t understand where do i have to place the font files and how to config Tailwind for loading the files.

I´d be very gratefull if somebody could help me.

Answer 1

I'm assuming you're using the module @nuxtjs/tailwindcss.

1. First, you'll have to run npm run build, so that tailwind files are created:

   • ~/tailwind.config.js
   • ~/assets/css/tailwind.css

2. Create a folder fonts under assets and place the fonts you've downloaded.

3. Include your fonts in ~/css/tailwind.css, as such:

@include font-face( KapraNeuePro, '~/assets/fonts/KapraNeueProFamily/Kapra-Neue-Pro-Regular', 400, normal, otf);
@include font-face( KapraNeuePro, '~/assets/fonts/KapraNeueProFamily/Kapra-Neue-Pro-Medium', 600, medium, otf);

etc.

4. Check out tailwind's docs on how to add font families in tailwind.config.js, and which configuration better suits your needs: (the following one is a quick working example)

module.exports = {
  theme: {
    fontFamily: {
      sans: ["KapraNeuePro"],
      serif: ["KapraNeuePro"],
      mono: ["KapraNeuePro"],
      display: ["KapraNeuePro"],
      body: ["KapraNeuePro"]
    },
    variants: {},
    plugins: []
  }
};

5. Dont' forget to remove from your layout and page all the default CSS related to font-family