🚀
Astro で FONTPLUS の Web フォントを読み込む
先に結論
スクリプトの読み込み部分に is:inline を入れるだけで OK。検証していないけれど TypeSquare 等の Web フォントも同様のやり方で読み込めると思う。
src/layouts/layout.astro
<head>
<script
is:inline
src="https://webfont.fontplus.jp/accessor/script/fontplus.js?..."
></script>
</head>
なぜなのか
Astro では Web フォントに限らず、外部スクリプトの読み込み時は is:inline をつける必要がある。そうしないと Astro でスクリプトの処理・最適化・バンドルが走ってしまい、期待通りの挙動にはならない模様。
外部スクリプトをロードする – Astro Docs
View Transitions を導入する場合
View Transitions を使用する場合は、ページ遷移ごとに Web フォントを読み込む必要がある。astro:after-swap イベントをリッスンして、新ページに切り替わった後 Web フォントをリロードする。
src/layouts/layout.astro
<script>
document.addEventListener('astro:after-swap', () => {
FONTPLUS.reload()
})
</script>
TypeScript で書くなら：
src/layouts/layout.astro
<script>
// 上記コードの TypeScript 版
interface FONTPLUS {
reload: (init?: boolean) => void
}
declare var FONTPLUS: FONTPLUS
document.addEventListener('astro:after-swap', () => {
FONTPLUS.reload()
})
</script>
ちなみに
Google Fonts に関しては、npm を用いたインストール方法が存在する。
Fontsourceを使う – Astro Docs
Discussion