字体が爆増!拡張字体「ウェブフォント」

日本語字体が3→11、英語字体が9→585と種類が大幅に増えました。
ここでは新しい拡張字体「ウェブフォント」とは何か、またその使い方を説明します。

拡張字体「ウェブフォント」とは?

日本語の字体はゴシック・丸ゴシック・明朝の8種類です。

英語の字体は種類が多く、個性的な字体でホームページを彩れます。

ウェブフォントという字体を変える仕組み

まめわざで、これまで利用できた字体は日本語3種類、英語9種類でした。
普及しているWindows・Mac・iPhone・Androidの各端末において、共通でインストールされている字体を選んだ結果の12種類です。
これでもAndroidは明朝体に非対応であるなど例外もあり、正確な最大公約数ではありません。
このように端末環境に依存する字体の種類は、簡単に増やすことはできません。

一方、ホームページを閲覧する際に、ネット上でフォントを同時に取得して表示する「ウェブフォント」という仕組みがあります。
これは、端末にインストールされていない文字でも、ホームページ閲覧時に一時的にフォントをダウンロードして表示するため、端末環境に依存せず、高い自由度と拡張性があります。

無料のウェブフォントサービス「Google Fonts」

ウェブフォントは著作権フリーのフォントをネット上(ウェブサーバー上)に置くことで誰でも利用・提供できます。
一方、Google Fontsは予め著作権フリーのフォントを集めた便利な無料サービスです。
今回提供を開始した拡張字体はすべてGoogle Fontsを利用しています。今後はGoogle Fonts以外のフォントの導入も検討して参ります。

日本語の字体が少なさとウェブフォントのデメリット

アルファベットは大文字と小文字で26×2=52文字、数字は10文字と、英語圏のホームページは100未満の字種で構成されています。
一方で日本語は漢字・ひらがな・カタカナなど種類が膨大で7,000文字超の字種を要します。
フォントを作って著作権フリーで公開する作者の方の下支えが必須のウェブフォントですが、字数から分かる日本語フォント作成の労力を考えると、Google Fontsで提供される日本語の少なさにも納得ができます。

日英で約70倍の字種の差がありますが、実際にフォントファイルの容量も50kbに対し3,500kbというように同程度の差が生じます。
50kbであれば、画像1枚より小さい程度の容量のため、読込に時間を要しません。そのため英語圏であれば、ウェブフォントは気軽に利用できます。
一方で、3,000~4,000kbの日本語フォントをダウンロードすると、ネットワークの環境によっては読込時間が生じます。
これは日本語のウェブフォントを利用する場合の最大のデメリットです。

まめわざでは、Google Fontsにある8種類の日本語フォントをすべて同時使用することは可能ですが、膨大なファイルのダウンロードを強要している点を忘れず、ユーザー視点に立った設計を心がけましょう。
日本語のウェブフォントの利用は、0~1種類程度に絞るのがおすすめです。

拡張字体「ウェブフォント」の使い方

日本語字体・英語字体の選択欄で「その他」を押すと選択ウィンドウが表示されます。

希望の字体を押してチェックマークがついた状態で、下部のボタンの「OK」から字体を適用します。同じくボタンから「キャンセル」も可能です。

上部のチェック欄で種類を絞り込み、上下にあるボタンでページ移動をして字体を探せます。

下記に挙げる字体選択欄で利用可能です。

  • デザインの字体選択欄
  • 装飾の字体選択欄
  • 部分装飾(右クリックからの文章の一部の装飾)の字体選択欄

部分装飾を利用できるトップページのショートカットや、先日公開した「公開ページで編集」機能でも利用できます。

その他の更新箇所

今回の拡張字体の導入にあたって、以下を合わせて更新しました。

更新箇所BeforeAfter
デザインの字体選択肢日本語のみ日本語と英語を別々に設定可
部分装飾の字体選択肢日本語のみ日本語と英語を別々に設定可
1ページモードでの字体選択
(ログイン後、右上の「≡」→「その他の設定」→「色・字体」にて)
不可
2020/2/27