JIN

JINのフォント設定 オススメは?

JINは設定で3種類のフォントから選べます。

その中でどれを選べば良いのか、どのタイミングでフォントについて考えるかについて考えます。

Vektor Passport(ライセンス期間1年)

JINで選べるフォント

JINで選べるフォントは3種類あります

  • デフォルト(端末の標準フォント)
  • 角ゴシックフォント(Noto Sans)
  • 角丸ゴシックフォント(Rounded M+ 1c)

標準フォント以外は、Google(Web)フォントです。

Noto Sans は、多くのサイトで使われているので、知らないうちに親近感が湧いてくるかもしれません。

どうしてフォントを選ぶのか

フォントを選ぶのは、表示する端末(パソコン・スマフォ・タブレット)が変わっても同じ字体で表示させたい、という考えがあるからです。

例えば、MacとWindowsでは、端末の標準フォントが違います。すると、それだけでサイトの見栄えが変わってきます。

自分で作ったバナーは丸文字だけど、表示される文章が角ゴシックになると統一感がなくなりますよね😓

それをどの端末でも同じように見せられるのが、Webフォントというものです。

Webフォントのメリット・デメリット

メリットは、先に述べたように端末環境にとらわれず「同じ字体で見せられる」こと。

デメリットは、フォントを端末に表示させるまでに時間がかかることです。

時間がかかる理由は、そのフォントを表示するために端末に読み込ませないといけないためです。

見え方の違い

基本3種類のフォントの見え方の違いです。

端末標準フォント

デフォルトフォント

■角ゴシックフォント(Noto Sans)

角ゴシックフォント

■角丸ゴシックフォント(Rounded M+ 1c)

角丸ゴシックフォント

端末標準フォントとは

ブラウザに予め設定されたフォントを利用して表示してます。

Google Chrome の場合は、【環境設定】→【フォントをカスタマイズ】から表示させるフォントを設定することができます。

端末ごとに設定されるフォントが異なっているので、見た目もそれぞれ変わってくることになります。

chromeのデフォルトフォント
Chromeの環境設定

例えば、ヒラギノ角ゴを選べば、そのフォントで表示してくれます。

JINで角丸ゴシックフォント(Rounded M+ 1c)を選べば、そちらを優先で表示してくれます。

フォントについて考えるタイミング

見た目にこだわりたくなるのもよくわかります。

なので、最初は好みでフォントを選んで大丈夫です。

ただ、時々ページ表示スピードを計測し、自分のサイトの表示速度が遅くなっていないのかを確認することをおすすめします。

もし遅いようでしたら、フォントを標準フォントへ変更してみてください。もしかすると少しは変わるかもしれません。

将来的な話

今はJINでサイトを作っているけれど、将来的には他のテーマを利用するかもしれません。

もしフォント設定を自由に変更できる(JINは3種類だけど、本当はもう少しある)なら、Webフォントをダウンロードして自分のサーバーに用意するなど対応策もあります。

ただ、色々と設定が大変だと思うし、やはり全ての漢字が標準装備というわけではないので、不安定な表示になることは避けられません。

まとめ

いかがでしたか?

JINが用意してくれているフォントは見やすいから使ってみたいと思うのです。

しかし、JINの致命的な欠点である【スピード問題】を忘れないでください。サイトの表示が遅い原因の一つとしてフォントの読み込みも関係します。

JINのスピードアップに関する記事も書いてますので、ぜひこちらも御覧ください。

JINを高速化するには?
表示速度が遅いという評判のJINを高速化するには?JINはデザインが可愛らしくて素敵なテーマなのですが、ページ表示スピードが遅いということで不満を沢山書かれています。最新のAMPにも非対応でどうやってページスピードを上げていくかを紹介しています。...

Vektor Passport(ライセンス期間1年)
Vektor Passport(ライセンス期間1年)