vic*_*.ja 3 javascript reactjs next.js google-fonts
我正在尝试在最新版本 13 的Nextjs项目上使用Google Fonts，但无法正确导入 Google Fonts（即 Poppins）。
过去我只是将链接标签添加到_document.js或_app.js文件中，仅此而已。
我正在尝试这种方式但没有成功：
<Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"></link>
</Head>
过去，另一种方法是使用 @import 在全局 CSS 样式表上导入 Google 字体，但此方法也不起作用：
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,700");
请告诉我如何在 Next 版本 13 及更高版本上执行此操作
要在 Next 13+ 项目中使用 Google 字体，您可以这样做：
应用程序/layout.js
import { Poppins } from 'next/font/google';
const poppins = Poppins({
subsets: ['latin'],
display: 'swap',
variable: '--font-poppins',
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900']
});
export const metadata = {
title: 'Page Title',
description: 'Page Description',
}
export default function RootLayout({ children }) {
return (
<html className={`${poppins.variable}`}>
<body>{children}</body>
</html>
)
}
然后在任何 CSS 文件中你都可以这样使用该字体
.class {
font-family: var(--font-poppins);
}
| 归档时间： |
|
| 查看次数： |
6413 次 |
| 最近记录： |