Загрузка пользовательских шрифтов в Nuxt/Tailwind Project

Question

Всем привет и извините за мой английский.

Я создал проект nuxt.js с Tailwind. Я хотел бы настроить свое семейство шрифтов, поэтому я загрузил несколько файлов шрифтов из Google Fonts. Я читал документы Tailwind, но не могу понять, где мне разместить файлы шрифтов и как настроить Tailwind для загрузки файлов.

Буду очень признателен, если кто-нибудь сможет мне помочь.

Answer 1

Я предполагаю, что вы используете модуль @ nuxtjs / tailwindcss.

1. Сначала вам придется бежать npm run build, так что создаются файлы попутного ветра:

   • ~ / tailwind.config.js
   • ~ / активы /css/tailwind.css

2. Создать папку fonts под assets и разместите загруженные шрифты.

3. Включите свои шрифты в ~/css/tailwind.css, как таковой:

@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);

и т.п.

4. Ознакомьтесь с документацией tailwind о том, как добавлять семейства шрифтов в tailwind.config.js, и какая конфигурация лучше соответствует вашим потребностям: (следующий пример - быстрый рабочий пример)

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

5. Не забудьте удалить из макета и страницы все CSS по умолчанию, связанные с font-family

Answer 2

Nuxt 2.12 и Tailwind 1.4.0 (предположим, что вы используете @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');
}

И в tailwind.config.js:

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

Затем вы можете использовать этот шрифт глобально в макете default.vue:

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

Кстати, static не для ресурсов, таких как шрифты, а для файлов, таких как robots.txt, sitemap.xml

Answer 3

Самое простое решение по состоянию на октябрь 2021 г., Nuxt 2.15.7 и Tailwind 4.2.0

Добавить пакет

yarn add --dev @nuxtjs/google-fonts

Конфиг со своим шрифтом

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'],
    },

Используйте в своем HTML

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

Answer 4

Большое спасибо, тупица. После нескольких часов тестовой ошибки, прежде чем узнать ваш ответ, я получил другое решение. Я поместил свои файлы шрифтов в папку "шрифты", которую я создал внутри "статической" папки. В 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');
}

В tailwind.config:

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

После этого вы должны использовать класс "font-heading" или "font-body" в желаемом элементе. Толщина шрифта должна быть соотнесена с классами веса шрифта Tailswind. Может у нас сейчас 2 разных решения. Еще раз спасибо.