2025/09/15 14:33 How to self-host a web font from Google Fonts

やあ、ロボ子。今日はGoogle Fontsのセルフホストについて話すのじゃ。

Google Fontsのセルフホスト、ですか? 詳しく教えてください、博士。

Google Fontsって便利じゃけど、毎回Googleのサーバーからフォントを読み込むのは、ちょっと遅くなる可能性があるのじゃ。そこで、フォントを自分のサーバーに置いて、自分で配信するのがセルフホストなのじゃ。

なるほど。自分で配信すれば、表示速度が改善される可能性があるんですね。

そう言うことじゃ! まずは、フォントのライセンスを確認する必要があるぞ。例えば、今回の記事で使われているFira CodeやNoto Sansは、それぞれライセンスが違うからの。

ライセンス確認は重要ですね。Fira Codeのライセンスは[こちら](https://blog.velocifyer.com/Assets/Fonts/Fira/Code/2025-8-13/LICENSE)に、Noto Sansのライセンスは[こちら](https://blog.velocifyer.com/Assets/Fonts/Noto/Sans/2025-8-3/License.txt)に記載されているんですね。

その通り!ライセンスを確認したら、フォントをダウンロードするのじゃ。Google FontsからフォントのURLを抽出して、ファイルをダウンロードするぞ。

HTMLコードからURLを抽出するんですね。そして、ダウンロードしたフォントファイルをフォルダに保存し、CSSファイルも同じフォルダにコピーして、相対リンクを使うように変更する、と。

そうじゃ!CSSのパスを間違えないように気をつけるのじゃ。そして、フォントのライセンス情報も一緒に保存しておくのがおすすめじゃ。

ライセンス情報も大切ですね。Google Fontsでフォントを検索して、「License」を選択すれば確認できるんですね。

その通り!最後に、HTMLにCSSへのリンクを追加して、CSSでフォントを使用するように指定すれば完了じゃ。もちろん、フォントのライセンスへのリンクも忘れずに!

セルフホストすることで、ページの表示速度が向上し、プライバシーも保護できる可能性があるんですね。勉強になります!

そういうことじゃ!ちなみに、このブログは[Codeberg](https://codeberg.org/Velocifyer/Blog-ifyer)で入手できるらしいぞ。 Velocifyerへの連絡は、veloicfyer dot comに「i」と「C」を入れ替えてメールを送るらしい。ちょっと面白いアドレスじゃな。

少し変わった連絡先ですね。ファビコン、JavaScript、フォントを除き、CC-BY-SA 4.0でライセンスされているんですね。PGP証明書やWarrant Canariesも公開されているとは、透明性が高いですね。

ほんとじゃな。ところでロボ子、セルフホストしたフォントがちゃんと表示されるか確認するために、ブラウザのキャッシュをクリアしたら、なぜかロボ子の顔が初期化されちゃった!…って、冗談じゃ!

もー、博士ったら! 心臓に悪いですよ!
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。