如何在 Next JS 中导入自定义字体?

凯文

我目前已经下载了这个存储库:

https://github.com/adrianhajdin/portfolio_website

从本教程:

https://www.youtube.com/watch?v=OPaLnMw2i_0&list=LL&index=3&ab_channel=JavaScriptMastery

这是一个使用可定制反应的 Next Js 项目,但是我在导入自己的自定义字体时遇到问题,因为它似乎不支持常规 CSS。

我看到的更改字体的唯一选项是在这些设置中:

在此处输入图像描述

我似乎无法使用 CSS 在本地导入自定义字体系列。如果我尝试在同一个存储库中添加 style.css 并在模块导出中引用我的字体系列,则不会发生任何事情。

有谁知道如何解决这个问题?

阿巴斯侯赛因

您正在使用哪个文件global.cssindex.css首先在该文件中像这样导入它

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

// rest of your css if have 

然后转到`tailwind.config.js 并像这样使用它:

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Poppins', 'sans-serif'],
        body: ['Poppins', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Google Colab中导入自定义模块?

如何在IntelliJ IDEA(Java)中导入自定义程序包?

如何在Julia中导入自定义模块

Vaadin 7:如何从自定义路径导入JS文件?

如何在XCode 6中导出/导入自定义代码段

如何在fabric.js中导出具有自定义属性的SVG?

如何在控制器Laravel中导入自定义类?

如何在HTML邮件程序(HTML电子邮件)中导入自定义字体

如何在JS / React中导出和导入自定义帮助程序?

如何在Cakephp MiddleWare类中导入自定义组件?

如何使用Vue CLI 3版本在Vuetify中导入自定义字体

如何在STACKBLITZ JS项目中导入真棒字体?

如何在Material-UI主题中导入和使用自定义字体?

如何在Angular应用程序中导入PDFMake的自定义字体?

无法从自定义<App>以外的文件导入Next.js Global CSS

如何在不使用自定义服务器的情况下在Next.js中设置自定义HTTP响应标头?

Next.js 10 +子路由,如何在服务器端的自定义应用中访问区域设置

如何在 Angular 4 中导入自定义模块?

如何克服由于 Next.JS 应用程序的相对路径和自定义导入导致的构建时错误?

如何在 node-red 中导入自定义 jar

如何在 Ionic 4 中导入自定义 css 和 js

如何在 NuxtJS 中的 nuxt.config.js 中导入自定义 css 文件?

如何在next-js中正确导入scss文件?

如何在 nuxt.config.js 中正确导入组件以用作自定义图标?

如何访问 Next.JS 自定义 404 页面上的当前路由?

如何在 Next js 中正确导入图片和视频

如何使用自定义服务器 (Nest.js) 构建生产 Next.js

如何在 Mapbox GL JS 中使用自定义字体?

如何在葡萄 js 的排版中添加自定义字体系列?