如何在Next.js项目的顺风css中使用谷歌字体

Question

我在Next.js中有一个项目，但不知道如何将谷歌字体与Tailwind CSS一起使用。

Answer 1

首先，您必须在globals.css中的styles文件夹中添加imported字体Url，并且For React.js它将在src的index.css文件夹中。

例如

@import url("https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

然后在tailwind.config.js文件中扩展modules.exports

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

最后，您可以在任何地方使用此字体，例如

<h2 className="font-play text-5xl font-bold uppercase">
Hello World!
</h2>

Answer 2

根据文档，您需要这样做才能使其与TailWind和Next13 一起工作

首先将next/font/google导入到您的_app.ts。并创建一个字体变量。

import Layout from '@/components/layout/Layout'
import '@/styles/globals.css'
import type { AppProps } from 'next/app
import { Kalam } from 'next/font/google';
const kalam = Kalam({ 
subsets: ['latin'],
weight:["400"],
variable: '--font-kalam',
});
export default function App({ Component, pageProps }: AppProps) {
return (
<main className={`${kalam.variable}`}>
<Layout>
<Component {...pageProps} />
</Layout>
</main>
)
}

然后使用tailwind.config.js并扩展您的字体系列。

/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
fontFamily: {
kalam: ['var(--font-kalam)'],
},
},
container: {
// you can configure the container to be centered
center: true,
// or have default horizontal padding
padding: '1rem',
// default breakpoints but with 40px removed
screens: {
sm: '500px',
md: '628px',
lg: '884px',
xl: '1140px',
'2xl': '1296px',
},
},
},
plugins: [],
}

要在代码中使用它，只需添加font-kalam作为类即可。

请参阅此处的文档。

Answer 3

InReact Js

步骤1：在index.css中导入谷歌字体

@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

步骤2：在Tailwind CSS中配置Google字体

const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
theme: {
extend: {
fontFamily: {
pacifico: ['"Pacifico"', ...defaultTheme.fontFamily.sans],
}
}
},
}

步骤3：使用自定义的谷歌字体

<h1 class="pacifico">Pacifico is Google Font</h1>