Loading custom fonts in Nuxt/Tailwind Project

问题

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.

回答1:

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

First, you'll have to run npm run build, so that tailwind files are created:
- ~/tailwind.config.js
- ~/assets/css/tailwind.css
Create a folder fonts under assets and place the fonts you've downloaded.
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.

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: []
  }
};

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

回答2:

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.

回答3:

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

来源：https://stackoverflow.com/questions/61425153/loading-custom-fonts-in-nuxt-tailwind-project

标签

nuxt.js

tailwind-css