Javascript 如何在 NextJS 13 中导入自定义谷歌字体链接标签不起作用

发布于05月30日

我试图用最新的version 13在Nextjs项目上使用Google Fonts，但我无法正确导入Google字体(即Poppins).

在过go ，我只是将链接标记添加到_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>

过go ，另一种方法是使用@IMPORT在全局CSS样式表上导入Google字体，但这种方法也不起作用:

@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,700");

请让我知道如何在下一个版本13和更高版本上执行此操作

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> ) }

Javascript 如何在 NextJS 13 中导入自定义谷歌字体链接标签不起作用

推荐答案

Javascript相关问答推荐

如何通过onClick为一组按钮分配功能;

如何在使用fast-xml-parser构建ML时包括属性值？

fs. writeFile()vs fs.writeFile()vs fs.appendFile()

TypeScript索引签名模板限制

将现场录音发送到后端

在grafana情节，避免冲突的情节和传说

当试图显示小部件时，使用者会出现JavaScript错误.

html + java script！需要帮助来了解为什么我得到(无效的用户名或密码)

查找最长的子序列-无法重置数组

Regex结果包含额外的match/group，只带一个返回

Reaction Native中的范围滑块

rxjs插入延迟数据

如何创建返回不带`new`关键字的实例的类

扩展类型的联合被解析为基类型

Vaadin定制组件-保持对javascrip变量的访问

传递方法VS泛型对象VS事件特定对象

当我点击一个按钮后按回车键时，如何阻止它再次被点击

是否可以在不更改组件标识的情况下换出Reaction组件定义(以维护状态/引用等)？如果是这样的话，是如何做到的呢？

P5play SecurityError：无法从'；窗口'；读取命名属性'；Add'；：阻止具有源的帧访问跨源帧

更改管线时不渲染组件的react