在 Nuxt/Tailwind 项目中加载自定义字体

Question

大家好，对不起我的英语。

我使用 Tailwind 创建了一个 nuxt.js 项目。我想自定义我的字体系列，所以我从 Google Fonts 下载了一些字体文件。我一直在阅读 Tailwind 文档，但我不明白我必须在哪里放置字体文件以及如何配置 Tailwind 以加载文件。

如果有人可以帮助我，我将非常感激。

Answer 1

截至 2021 年 10 月的最简单解决方案，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 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';

字体.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>

顺便说一句，静态不是用于资产，如字体，而是用于文件，如 robots.txt、sitemap.xml

Answer 3

非常感谢 ramigs。 经过几个小时的测试错误，在知道你的答案之前，我得到了另一个解决方案。我将我的字体文件放在我在“静态”文件夹中创建的文件夹“字体”中。在资产 > 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 的字体粗细类相关。 也许我们现在有两种不同的解决方案。再次感谢。

Answer 4

我假设您正在使用模块 @nuxtjs/tailwindcss。

1. 首先，您必须运行npm run build，以便创建顺风文件：

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

2. 在assets下创建一个文件夹fonts，并放置你下载的字体。

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. 不要忘记从布局和页面中删除与font-family 相关的所有默认 CSS