【Cocoon】フォント設定、どれがオススメ? Webフォントで表示速度はどうなる?

Cocoonカスタマイズ

こんにちは、さいとう(@S41T0H)です。

今日も今日とて喫茶店でブログ執筆中です。

ところで、サイコーなWordPress用無料テーマ「Cocoon」(→5ステップ簡単Cocoonコピペカスタマイズ公開中です)では、標準機能でWebフォントが利用できます。これはスゴい。

Ver.1.1.0現在、利用できるフォント設定は以下の10種類です。

フォントは「Cocoon設定」→「全体設定」タブ→「サイトフォント」から設定可能です。
  1. 游ゴシック体, ヒラギノ角ゴ
  2. メイリオ, ヒラギノ角ゴ
  3. MS Pゴシック, ヒラギノ角ゴ
  4. 源ノ角ゴシック(Webフォント)
  5. Mplus 1p(Webフォント)
  6. Rounded Mplus 1c(Webフォント)
  7. はんなり明朝(Webフォント)
  8. こころ明朝(Webフォント)
  9. さわらびゴシック(Webフォント)
  10. さわらび明朝(Webフォント)

このうち、1~3は内蔵フォント、4~10はWebフォントによる表示になります。

内蔵フォントだと、指定されたフォントが閲覧者の端末にインストールされていないと代替フォントに置換されるのに対し、WebフォントではWebサーバー上のフォントをキャッシュして表示するためどの環境で閲覧しても同一のフォントでの表示が可能です。

しかし、日本語フォントはファイルサイズが大きいためWebフォントだと少し表示速度が遅くなってしまうのがデメリットです。

表示速度を取るか、見た目の綺麗さを取るか。トレードオフの関係ですね。

スポンサーリンク

Cocoonで内蔵フォントを設定すると?

1~3では、2つのフォントが指定されています。

しかし、それぞれ2つ目はすべて「ヒラギノ角ゴ」ですね。

これはいったいどういうことなのでしょうか。

「ヒラギノ角ゴ」はApple端末であれば標準搭載されているキレイなゴシック体のフォント。

一方、「游ゴシック体」「メイリオ」「MS Pゴシック」はそれぞれWindows向けのフォントになります(「游ゴシック体」はMacにも標準搭載されています)

特にこだわりのない場合は「游ゴシック体, ヒラギノ角ゴ」か「メイリオ, ヒラギノ角ゴ」と指定すれば綺麗に表示ができるかと思います。

ちなみに、メイリオだとIKEAっぽくなります。

CocoonでWebフォントを指定しても体感的に重くならない!

先程も言ったとおり、Webフォントを使用すると文字が遅れて表示されることがあり、煩わしいことがあります。

しかし、CocoonではWebフォント表示にGoogleフォントのEarly Access(早期アクセス)という技術が用いられています。

Google Fonts は、デザイナー ウェブフォントを直感的にご利用いただける、安定したオープンソース ディレクトリです。Google Fonts 早期アクセスでは、現時点で完全にはサポートしていないフォントを試験的に提供しています。

膨大な数の文字のデザインに要する時間や、大容量のフォント ファイルをウェブフォントとして提供する際に必要な技術的インフラストラクチャなど、日本語の書体デザインやフォント開発にはさまざまな課題が立ちふさがります。そこで、規格や技術の開発を進めると同時に、Google Fonts 早期アクセスを通じてデザイナーやデベロッパーの皆様に日本語のウェブフォントをお試しいただけるようにしました。

こちら、外部CSSとして指定することでCDN的にWebフォントを供給する仕組みで、Googleのサーバー経由で高速にWebフォントを読み込むことができます。

ちなみにこのサイトも現在「源ノ角ゴシック」をWebフォントとして読み込んでいますが、いかがでしたでしょうか。

わずらわしさも殆どなくスムーズに表示されていると思います。

Google PageSpeed Insightsのスコアはわずかに落ちます。

便利な技術ですので、ぜひ使ってみてはいかがでしょうか。

【Cocoon】プロフィールボックスをオシャレにカスタマイズしてみたッ!!
CocoonでプロフィールボックスのデザインをTwitter風にオシャレにデザインするCSSカスタマイズです。コピペで使えます。

【支援お待ちしております!】

当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです!(300円単位での投げ銭が可能です)

継続的な更新・サポートのためにご支援お願いいたします……!

▶支援先:サイトに掲載するCSSカスタマイズの支援をお待ちしています!

サイトに掲載するCSSカスタマイズの支援をお待ちしています! - polca(ポルカ)
"今後の記事執筆の励みになります!"を支援のおかえしとして受け取ることができます。

その他のカスタマイズは下記ボタンから。

コメント