GoogleのフォントをAstroで使う 日本語・Latinの最適解探し（検討中
mimi
とかを見て
予想ではたぶんLatinだけならなんでもないので、肝は日本語。
Next.jsのFont最適化みたいな神機能はどこかにないでしょうか。
mimiCASE1: ふつうにローカルフォントにしてやってみる
まず該当のフォントをヘルパーで見てみる
わかりやすい。取り敢えずスター付けておこう。
有り難く、以下のように書かれているのを確認してダウンロード。
- Download files:
Your generated archive for Zen Kaku Gothic New with charsets [latin] and styles [500,regular] includes the formats [woff2].
ってファイルサイズ10KBしかなかった、間違えた。
Select charsets を忘れずに。
ということで、2ファイルで合計1.9Mb。そうですよねえ…
/public/fonts/ 以下に配置。
helperが書いてくれてるCSSからパス設定だけ変えてbase layoutにstyleタグで書く。
Layout.astro
// 前略
<style>
/* zen-kaku-gothic-new-regular - japanese_latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 400;
src: url('/fonts/zen-kaku-gothic-new-v16-japanese_latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* zen-kaku-gothic-new-500 - japanese_latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 500;
src: url('/fonts/zen-kaku-gothic-new-v16-japanese_latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
</style>
tailwind.config.mjsにフォント情報をこんな感じで追加
// 前略
export default {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
extend: {
fontFamily: {
ja: ["Zen Kaku Gothic New", "sans-serif"],
},
},
},
plugins: [
plugin(function ({ addBase }) {
addBase({
".SOMEWHERE": {
"h1,h2,h3,h4,h5,h6": {
"@apply font-ja": {},
},
},
});
}),
],
};
無事に表示はされる。
まずはこれを1つのブランチにしてCloudflareにあげておこう。
mimiCASE2: Fontsourceを使う
yarn add @fontsource/zen-kaku-gothic-new
して、2つのウェイトをLayout.astroにインポートする。
---
import '@fontsource/zen-kaku-gothic-new/400.css';
import '@fontsource/zen-kaku-gothic-new/500.css';
---
tailwind.config.mjsにフォント情報を追加するのはCASE1と一緒。
無事にフォントが読み込めました、がローカルでもレイアウトシフトが発生しちゃう。
一応、ブランチをアップしてみます。
mimiブランチを確認したところ、
同条件でCASE1と2でLightHouseは少しだけCASE1の方が良さげ。
が、Fontsourceはフォントを分割してくれていて、がっつり全文で日本語フォント使う条件だとどうなるかはまだ分からない。要検討。
一旦、Fontsource採用してみて、サイトが仕上がってきたらまたテストしてみる。
その時は、CASE 3 普通にGoogleのCDN使うのとどっちが良いかもテストしよう。
mimiCloudflareの強さでCASE1でも問題ない、ってならないかな、ってちょっと期待しています。