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

2023-08-15 2024-05-04

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

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

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

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

フォントはNotoSansJPを使用

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

【Web制作】個人サイト/てがろぐで約物半角フォント「Yaku Han JP」を使う

個人サイト/てがろぐの約物半角フォントへの変更と検索避けのカスタマイズ備忘録。

archive.juliet-project.com

Yaku Han JP - 約物半角専用のWebフォント

Yaku Han JP（ヤクハンジェイピー）は、Web上の日本語テキストに含まれる約物を半角にする「約物半角専用Webフォント」です。

yakuhanjp.qranoko.jp

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

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

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

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

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

Webフォントでウェブサイトをもっと魅力的に

Webフォントは、Google Fontsで日本語フォントが増えて以来、サイト制作に欠かせない要素となりました。更に、バリアブルフォントの登場でより軽量化・表現の幅を広げることができるようになりつつあります。技術的な話題ととらえられがちなWebフォントですが、デザイナーにとっても、大変興味深い分野です。

www.marukin-ad.co.jp

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

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

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

日本語WEBフォントをサブセット化する際の参考文字列一覧 | U-618WEB

WEBフォントをサブセット化して使用する際に参考になるかもしれない文字列一覧です。 Noto sansの軽量化の際などに。

u-618.org

当サイトでの設定値

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

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を使い始めた件について記事を書きました。

SVGアイコンを使ってみた｜MiscNote Blog

Webフォントをセルフホスティングした流れでWeb絵文字(アイコンフォント)の読み込みも早くしたい！と思いました。アイコンフォントは「Google Material Icons」や「Font Awesome」をCDNを使って設置していたのですが、サイト内では数カ所しか使ってないのにアイコンデータ全体を読み込んでる形になっていたので、サイトの表示速度を測る「PageSpeed Insights」で注意されていました。

miscnote.com