如何在使用尾风 css 时在本地将谷歌字体添加到 Next.Js 项目
Posted
技术标签:
【中文标题】如何在使用尾风 css 时在本地将谷歌字体添加到 Next.Js 项目【英文标题】：How to Add a google font to Next.Js Project locally while using tailwind css 【发布时间】：2021-07-08 17:36:48 【问题描述】：对于我要创建的网站，我想使用 google 的“Work Sans”字体。 我下载了“WorkSans-Black.ttf”文件，在“public”文件夹中创建了一个子文件夹“fonts”，并将该文件放入其中。下面我为你们截取了文件夹结构。 谁能帮帮我，下一步是什么？
【问题讨论】：
【参考方案1】：1。下载字体
下载字体并将其放在public/font 目录中。
我建议使用此工具下载 Google 字体：https://google-webfonts-helper.herokuapp.com/fonts/work-sans?subsets=latin
2。使用您的字体扩展 Tailwind 的字体堆栈
// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports =
theme:
extend:
fontFamily:
sans: ['Work Sans', ...defaultTheme.fontFamily.sans],
,
,
,
// ...
// tailwind.css
@tailwind base;
@tailwind components;
// Repeat this for all the weights you downladed
@font-face
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
src: local(''),
url('public/fonts/work-sans-v9-latin-regular.woff2') format('woff2'),
url('public/fonts/work-sans-v9-latin-regular.woff') format('woff');
@font-face
font-family: 'Work Sans';
font-style: normal;
font-weight: 100;
src: local(''),
url('public/fonts/work-sans-v9-latin-100.woff2') format('woff2'),
url('public/fonts/work-sans-v9-latin-100.woff') format('woff');
@tailwind utilities;
3。 （可选）预加载字体以提高性能
// Ref.: https://kirazhang.com/posts/nextjs-custom-fonts
import Head from "next/head";
import Link from "next/link";
export default function Layout
return (
<div>
<Head>
<link
rel="preload"
href="public/fonts/work-sans-v9-latin-regular.woff2"
as="font"
crossOrigin=""
/>
<link
rel="preload"
href="public/fonts/work-sans-v9-latin-100.woff2"
as="font"
crossOrigin=""
/>
</Head>
<body><Main /></body>
</div>
)
【讨论】：
以上是关于如何在使用尾风 css 时在本地将谷歌字体添加到 Next.Js 项目的主要内容，如果未能解决你的问题，请参考以下文章
如何将谷歌地图标记的纬度和经度发送到 Firebase - android？ [关闭]