這邊用到的字型來自Google Font 挑一款自己喜歡的字型吧
編輯 app\fonts.js 檔案內如下:
import { Orbitron } from "next/font/google";
export const orbitron = Orbitron({
subsets: ["latin"],
});
編輯 components\Heading.jsx 檔案內如下:
import { orbitron } from '@/app/fonts'
function Heading({ children }) {
return (
<h1 className={`font-bold text-2xl pb-3 ${orbitron.className}`}>{children}</h1>
)
}
export default Heading
執行畫面:
做完上面的步驟,感覺要使用自訂字型有點麻煩,className的寫法變得有點複雜
className={`font-bold text-2xl pb-3 ${orbitron.className}`}>
想要直接在 Tailwind Css內使用 如下
className={font-orbitron font-bold text-2xl pb-3}>
編輯 app\fonts.js 檔案內容如下:
import { Orbitron } from "next/font/google";
export const orbitron = Orbitron({
subsets: ["latin"],
variable: "--font-orbitron",
});
編輯 app\layout.jsx 檔案內容如下:
import Link from "next/link";
import NavBar from "../components/NavBar";
import "./globals.css"
import { orbitron } from "./fonts";
export default function RootLayout({ children }) {
return (
<html lang="en" className={orbitron.variable}>
<body className="bg-orange-50 flex flex-col px-4 py-2 min-h-screen">
<header>
<NavBar />
</header>
<main className="grow py-3">
{children}
</main>
<footer className="border-t py-3 text-center text-xs"> Game data and images courtesy of <a href="https://rawg.io/" target="__blank" className="text-orange-800 hover:underline">RAWG</a></footer>
</body>
</html>
)
}
編輯 tailwind.config.js 檔案內容如下:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./app/**/*.{js,jsx,tsx}", "./components/**/*.{js,jsx,tsx}"],
theme: {
extend: {
fontFamily: {
orbitron: ["var(--font-orbitron)", "sans-serif"],
},
},
},
plugins: [],
};
編輯 components\Heading.jsx 檔案內容如下:
import React from 'react'
// 把下一行註解掉
// import { orbitron } from '@/app/fonts'
function Heading({ children }) {
{/* 在className 直接使用自訂字型 */}
return (<h1 className="font-orbitron font-bold text-3xl pb-3">{children}</h1>
)
}
export default Heading
完成以上步驟,就可以直接在className裡面使用自訂字型!(也會有自動提示)
更多自訂字型的細節可以參考Next.js官網這篇With Tailwind CSS
上面已經完成,在特定的組件或網頁上設定自訂字型
最後要實作的功能,更改網頁的預設字體
編輯 app\fonts.js 檔案內容如下:
import { Orbitron, Exo_2 } from "next/font/google";
export const orbitron = Orbitron({
subsets: ["latin"],
variable: "--font-orbitron",
});
export const exo2 = Exo_2({
subsets: ["latin"],
variable: "--font-exo2",
});
編輯 app\layout.jsx 檔案內容如下:
import Link from "next/link";
import NavBar from "../components/NavBar";
import "./globals.css"
import { exo2, orbitron } from "./fonts";
export default function RootLayout({ children }) {
return (
<html lang="en" className={`${exo2.variable} ${orbitron.variable}`}>
<body className="bg-orange-50 flex flex-col px-4 py-2 min-h-screen">
<header>
<NavBar />
</header>
<main className="grow py-3">
{children}
</main>
<footer className="border-t py-3 text-center text-xs"> Game data and images courtesy of <a href="https://rawg.io/" target="__blank" className="text-orange-800 hover:underline">RAWG</a></footer>
</body>
</html>
)
}
編輯 tailwind.config.js 檔案內容如下
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./app/**/*.{js,jsx,tsx}", "./components/**/*.{js,jsx,tsx}"],
theme: {
extend: {
fontFamily: {
sans: ["var(--font-exo2)", "sans-serif"],
orbitron: ["var(--font-orbitron)", "sans-serif"],
},
},
},
plugins: [],
};
目前完成的字體設定就兩組,一個用於標題的組件
一個就是預設字體,如果要加入更多的字體
就直接參考Taiwind Css 官網文件吧
大叔的鐵人賽第十一天結束 :)