サイトのフォントをNotoSansJPに変更しました

今までサイトのフォントについてはあまり意識していませんでした。

先日てがろぐのカスタマイズ中、他のスキンの構成を参考にしてる時に面白いフォントを使ってるのを見て、「そうか…WEBフォントで指定するのもありか…!」と思い早速試してみることに。

その時の作業記録を残しておこうと思います。

…と記事の草稿を書いて放置していたので、実際フォントを変更した日から2ヶ月ほど経ってしまいました😭
今回の記事はフォント変更直後に書いた草稿を元に作成しています。

フォントはNotoSansJPを使用

フォントの種類は特に迷わず、有名・よく使われているNotoSansJPにしました。
また、調べていく中で「Yaku Han JP」というフォントを知りました。

「これ良いじゃん!」ということでこちらも使うことに。

色々試行錯誤した結果『YakuHanJPs(カッコのみ)』を使用することにしました。

セルフホスティングに挑戦

設定はできたのですが、サイトを表示した時に一瞬字が乱れるというか、読み込みが発生してフォント表示が切り替わっていました。

これは『WEBフォントの読み込みが間に合わずデバイスのフォントを表示→WEBフォントの読み込みが完了して切り替わる』ということが起きていると推測。
「セルフホスティング」をすることで表示を素早く行えるようなので、試してみることに。

手順はサイトに書いてある通りに行い無事完了。
表示させてみると気持ち早くなったような…崩れもなくなったような…気がする…😅

あまり試すとサーバーに負担をかけると思うのでこの辺で止めておきますw


ちなみにサブセットを行う際、こちらのサイトの文字列一覧を使用させていただきました。

当サイトでの設定値

一応メモとして、記事作成時のフォント設定をここに書いておきます。

font-family: 'YakuHanJPs_Noto', 'NotoSansJP', 'Hiragino Sans', "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
/*「Yaku Han JP」*/
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanjp_s-noto.min.css');

/* NotoSansJP Regular400 */
@font-face {
  font-family: 'NotoSansJP';
  src: url('NotoSansJP-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

/* NotoSansJP Bold700 */
@font-face {
  font-family: 'NotoSansJP';
  src: url('NotoSansJP-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: bold;
  font-display: swap;
}

/* NotoSansJP Black900 */
@font-face {
  font-family: 'NotoSansJP';
  src: url('NotoSansJP-Black.woff2') format('woff2');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

headにはこちらのタグを入れてます。読み込みが少し早くなる…らしいので(効果があるのかよく分かってない😅)

<link rel="preload" href="NotoSansJP-Regular.woff2" as="font" type="font/woff2" crossorigin>

最後に

今までフォントの事はあまり考えてなかったので、見直す事ができて良かったです。どのデバイスでサイトを見ても同じように表示されるので、統一感が出て良いですね。

というかiOSではサイトの雰囲気がだいぶ違っていて驚きました…(普段Androidを使うので、あまりiOSでは確認してなかった。)
フォントが違うだけでこんなに変わるんだなぁ。

フォントについてはこれ以上触ることはないと思いますが、次はGoogle Iconの読み込みを早くしたいなと思ってます。今はWEBフォントと同じように全部読み込んで表示させてるので。なかなか難しそうですが…😅
うまくできたらそちらも記事にしたいと思います。
※草稿作成後、アイコンのセルフホスティング SVGアイコンの使用も無事できたので後日記事にしようと思います。

【2023/8/27 17:20追記】
SVGを使い始めた件について記事を書きました。

関連記事
    新着記事
      ブログ内検索