astro-notion-blogをカスタマイズ(その2) ~フォントの変更~

Google Fontsの導入

Webフォントとは？

　Webフォントについて調べで整理した内容を残しておく。Webフォントとは、サーバ上に置かれたフォント情報をWeb経由で取得して表示フォントとして利用する技術で、異なるOSやブラウザ、端末などに依存すること無く、共通した表示をすることができる。一方で、サービス終了による影響や、フォント情報を読み込むために表示速度が遅くなる可能性もある。またオフラインでは利用できないこともデメリットとしてあげられるが、ブログはオンライン前提なので問題ない。

　メリットを箇条書きにすると、こんな感じ。

👍

メリット

どの端末でも同じ見た目を揃えられる。
Web上のフリーのフォントを簡単に利用でき、デザインの自由度が高い。
フォントのバージョンアップを考慮する必要がない。

👎

デメリット

フォントファイルをネット経由で読み込むため、表示速度が遅くなる。
オフラインでは使えない。

Google Fontsとは？

　今回は、Googleが提供しているGoogle Fontsを利用することにした。Google Fontsは無料で商用利用も可能であって種類も豊富なことと、安定したサービスを提供してくれる安心感、また導入方法も簡単な点が導入を決めた理由だ。また、Google FontsはCDN(Content Delivery Network)経由で配信されるため、表示速度も早いというメリットがある。

導入方法

フォントの検索

　さっそく、Google Fontsのサイトからフォントを探してくる。

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

https://fonts.google.com

　初期表示では、すべての言語が表示されているため、Filterから言語を日本語に切り替える。すると、右側には約50のフォントがサンプル文字列とともに表示されるので、この中から自分の好みはもちろん、サイトの雰囲気にあったフォントを選ぶ。

　今回、私はKiwi Maruというフォント選択した。丸みがあって優しい印象を与えつつも、読み難さを感じさせなかったところが気に入った。

Kiwi Maru - Google Fonts

Kiwi Maru was created mainly for use in digital devices, and I hope you will use it experimentally in your papers and reports. The basic vocabulary of the Japan

https://fonts.google.com

　念の為に、ライセンスを確認し利用に関して問題がないことを確認した。

Webサイトへの埋め込み

　右上のGot font > Get embed codeと進んでいく。Webフォントとしてではなく、フォントファイルをダウンロードして利用することもできる。その場合は、Download allを選択すればよい。

　Embed codeに進むと、タブ表示があるのでWebのままで<link>からコードをコピーしてブログに埋め込む。

　astro-notion-blogでの埋め込み先は、私の場合はLayout.astroのheadタグの中にlinkを埋め込むことにした。

<html lang="en" prefix="og: https://ogp.me/ns#">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    ~省略~
    
    <!-- Google fonts-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap" rel="stylesheet">
    <!-- Google fonts-->

Layout.astroのheadタグ内にコピーしたlinkを貼り付け。

　次にLayout.astroのスタイルからbodyに適用されているスタイルを見つけ、font-familyにフォントを追加する。

  body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--fg);
    font-family: 'Kiwi Maru', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Helvetica, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
      'Hiragino Sans GB', メイリオ, Meiryo, 'Apple Color Emoji', Arial,
      sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
   ~省略~   
  }

Layout.astroのbodyに適用されるフォントにKiwi Maruを指定する。フォントが取得できなかった場合はデフォルトのフォントが使用されるように、デフォルトの記述を残したままとした。

　これらの設定を終えて、開発環境で動作確認を行い、指定したフォントが適用されていることを確認してから本番環境にデプロイする。

まとめ

　フォントをデフォルトから自分好みのフォントに変更することに挑戦した。思っていた以上に簡単に変更ができ、Webフォントの利便性も知ることができた。フォントを変えたことで、ブログへの愛着も湧いてきたように感じる。

ふつうのITエンジニアの独り言