かえでさんの記事を参考にした
Config
const config: QuartzConfig = {
configuration: {
...
theme: {
fontOrigin: "local",
cdnCaching: false,
typography: {
header: "LINE Seed JP",
body: "LINE Seed JP",
code: "Juisee",
},
},
...
},
}
フォントフェイス
@use "./base.scss";
@font-face {
font-family: "LINE Seed JP";
src: url("/static/fonts/LINESeedJP_OTF_Rg.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "LINE Seed JP";
src: url("/static/fonts/LINESeedJP_OTF_Bd.woff2") format("woff2");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Juisee";
src: url("/static/fonts/Juisee-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Juisee";
src: url("/static/fonts/Juisee-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
font-display: swap;
}
OGP
デフォルトではローカルフォントを見てくれない
あと、woffに対応していないので注意
ローカルフォントをとってくるユーティリティを作る
フォントの名前解決をよしなにしてほしい…
import { promises as fs } from "fs"
import path from "path"
import { QUARTZ } from "./path"
import { FontWeight } from "satori/wasm"
import chalk from "chalk"
const fontDir = path.join(QUARTZ, "static", "fonts")
type FontDict = { [rawFontName: string]: { [weight: number]: string } }
const localFonts: FontDict = {
"LINE Seed JP": {
400: "LINESeedJP_OTF_Rg.otf",
700: "LINESeedJP_OTF_Bd.otf",
},
"Juisee": {
400: "Juisee-Regular.ttf",
700: "Juisee-Bold.ttf",
},
}
export async function getLocalFontData(rawFontName: string, weight: FontWeight) {
const fontName = localFonts[rawFontName][weight]
const fontPath = path.join(fontDir, fontName)
try {
await fs.access(fontPath)
return fs.readFile(fontPath)
} catch (error) {
console.log(
chalk.blue(
`\nInfo: Failed to get local font ${rawFontName} with weight ${weight}`,
),
)
}
return undefined
}
Google Fontsを取りに行く前に差し込む
import { getLocalFontData } from "./font"
...
export async function fetchTtf(
rawFontName: string,
weight: FontWeight,
): Promise<Buffer<ArrayBufferLike> | undefined> {
const localFontData = await getLocalFontData(rawFontName, weight)
if (localFontData) {
return localFontData;
}
...
}