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

Answer 2

Nuxt 2.12 and Tailwind 1.4.0 (assume you're using @nuxtjs/tailwind):

tailwind.css:

/* purgecss start ignore */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
/* purgecss end ignore */
@import 'tailwindcss/utilities';

/* add fonts here */
@import '~assets/css/fonts';

fonts.css:

@font-face {
  font-family: Underground;
  font-weight: 400;
  src: url('~assets/fonts/Roboto.woff2') format('woff2'),
       url('~assets/fonts/Roboto.woff') format('woff');
}

And in tailwind.config.js:

module.exports = {
  theme: {
    fontFamily: {
      roboto: ['Roboto']
    }
  },
  variants: {},
  plugins: []
}

Then you can use this font globally, in your default.vue layout:

<template>
  <div class="container mx-auto font-roboto">
    <nuxt />
  </div>
</template>

BTW, static is not for assets, like fonts, it's for files, like robots.txt, sitemap.xml

Answer 3

Simplest Solution as of October 2021, Nuxt 2.15.7 & Tailwind 4.2.0

Add package

yarn add --dev @nuxtjs/google-fonts

Config with your font

nuxt.config.js

  googleFonts: {
    families: {
      'Architects Daughter': true,
      // or:
      // Lato: [100, 300],
      // Raleway: {
      //   wght: [100, 400],
      //   ital: [100]
      // },
    },
  },

tailwind.config.js

    fontFamily: {
      handwritten: ['Architects Daughter'],
    },

Use in your HTML

    <h2 class="font-handwritten">
      This is a custom font
    </h2>

Manually reload the page, as hot reload might not suffice.

Answer 4

Thanks a lot ramigs. After some hours of test-error, before to know your answer, i got another solution. I placed my font files inside a folder "fonts" i created inside "static" folder. In assets > css > tailwind.css:

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

@font-face {
    font-family: 'Roboto';
    font-weight: 700;
    src: url('/fonts/Roboto/Roboto-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'OpenSans';
  font-weight: 500;
  src: url('/fonts/OpenSans/OpenSans-Medium.ttf') format('truetype');
}

In tailwind.config:

theme: {
    extend: {
        fontFamily: {
             heading: ['Roboto', 'sans-serif'],
             body: ['OpenSans', 'sans-serif']
        }
    }
}

After that you have to use class "font-heading" or "font-body" in element you want. The font weight of font has to be relationated with font-weight classes of Tailswind. Maybe we have now 2 different soluctions. Thank you again.