webデザインにおいてフォントはとても重要な役割を担っています。

使っているフォントによって印象が変わるので、デザイナーはどんなフォントを使うかに気を使います。また、使うフォントによっては見ている環境で表示出来なかったりと、色々面倒なこともあります。

この記事ではwebフォントについて正しく理解し、使いこなせるように解説します。
デザイナーさんに是非読んで欲しいです！！

webデザインにおけるフォントの基礎知識

webフォントの話しに入る前に、まずはwebデザインにおけるフォントの基礎について説明します。

• パソコンやスマホにインストールされているフォントを使う
• webフォントを使う

webサイトに表示するフォントは、この2通りになります。

僕らのパソコンやスマホにはデフォルトで多くのフォントがインストールされています。
webサイトの制作者はcssでそのフォントを指定することで、サイトに反映させることが出来ます。

ただ、このインストールされているフォントは使っているパソコンやスマホによって様々で、指定するフォントによっては見てる人の環境によって表示に差異が生まれることもあります。

指定したフォントがMacには入ってるけど、Windowsには入っていないため、Windowsで意図した表示にならない、なんてことが起こりうるのです。そのためなるべく差異が生じないように、cssで指定する際は、下記のように優先度の高いものから指定します。

*{
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

パソコンやスマホにデフォルトで入っているフォントは有名なフォントで見慣れているし、読みやすいものなので、サイト内のメインの日本語テキストは特別な理由がない限り、後述するwebフォントではなく、デフォルトで入っているフォントを使った方が良いです。

以前はwebサイトに使うフォントはパソコンやスマホにインストールされているものを使い、変わったフォントを使う場合は画像にすることが一般的でした。しかし、最近は無料で使えるwebフォントも出てきたり、パソコンやスマホのスペックが上がり表示速度が速くなったりと、webフォントを使える環境が整ってきました。

因みにフォントには大きく分けて『セリフ体』と『サンセリフ体』の2種類があります。

日本語だとセリフ体が明朝体で、サンセリフ体がゴシック体になります。日本語は読みやすさ的に、メインのテキストにはゴシック体を使うことの方多いです。

webフォントとは

webフォントとはユーザーのパソコンやスマホにインストールされているフォントを使うのではなく、予めサーバーに用意（アップロード）しておいたフォントを使うことです。

cssやjsと同じで、fontフォルダを作ってそこにファイルを置いて読み込む方法と、後述するwebフォントサービスを使う方法があります。

最近はwebフォントを使うことは一般的になり、多くのサイトで使っているのですが、注意する点もいくつかあります。導入方法に入る前に、まずはメリットとデメリットを紹介します。

webフォントのメリット

• ユーザーが見ている環境に依存しない
• 使えるフォントのバリュエーションが増える
• 無料のものもあり、簡単に導入出来る
• SEO的に良い
• テキストの変更が楽

ユーザーが見ている環境に依存しない

ユーザーのパソコンやスマホにインストールされているフォントを使う場合、インストールされているものがデバイスによって違うので選ぶフォントによっては、意図しないものが表示されてしまうリスクがあります。しかしwebフォントの場合、サーバーにアップしてあるフォントを使うので、ユーザーの環境に依存することなく、表示することが出来ます。

使えるフォントのバリュエーションが増える

Google Fontsには約950種類ものフォントがあります。これらを使うことで、表現のバリュエーションはかなり増えます。

無料のものもあり、簡単に導入出来る

前述したGoogle Fontsは無料で使うことが出来ます。web制作をやっている人の多くはAdobeを契約していますが、そのAdobeが運営しているAdobe Fonts（Typekit）もAdobeを契約していれば追加料金なしで使えます。また、契約するサーバーによってはいくつかのwebフォントが無料で使えることもあります。（https://www.onamae.com/server/rs/webfont/）

SEO的に良い

これは画像を使う場合と比べてです。デフォルトで入っているフォントを使う場合と比べたときのメリットではないです。画像でなく、テキストにすることでクローラーに正しくサイトの情報を伝えることが出来るのでSEO的に良いです。画像でもalt属性を使うことで、画像の内容をクローラーに伝えることはできますが、テキストの方がより良いです。

テキストの変更が楽

これも画像を使う場合と比べてです。テキストに画像を使ってしまうと、そのテキストを修正したいときに、画像を作り直して、書き出して、サーバーにアップしないといけません。また、デバイスによって縦長、横長と比率が違うので、いくつか画像を用意しないといけなかったりもします。画像よりテキストの方が修正が入った際の工数は少なくなります。

webフォントのデメリット

• フォントファイルは重い
• 使いたいものが無料であるとは限らない
• 日本語フォントはまだまだ少ない

フォントファイルは重い

基本的にフォントファイルは容量が大きくなってしまいます。アルファベットであればA~Zと数字くらいなので、大したことありませんが、日本語になるとひらがな、カタカナ、漢字、数字で2万文字くらいになります。ファイルサイズは10MBを超えることもあります。キービジュアルに使うような高画質で大きな画像も1 MBくらいなので10MBはなかなかのサイズです。ただ、2万文字全てを使うわけではないので、必要な文字のみを読み込む（サブセット化）ことで、容量を小さくする方法もあります。

使いたいものが無料であるとは限らない

有名なフォントでも無料では使えない場合もあります。有料フォントは買い切り、サブスク、PV数に応じて値段が変わるなど、様々な形態があります。

日本語フォントはまだまだ少ない

特に無料の日本語フォントはまだまだ数がありません。Google Fontsも日本語フォントに関しては、9個しかありません。

webフォントの導入方法

1. フォントをダウンロードし、自分のサーバーにアップする
2. webフォントサービスを使う

webフォントを導入する場合、この2通りの方法があります。

フォントをダウンロードし、自分のサーバーにアップする

この方法はフォントファイルをダウンロードし、サーバーにアップして使う方法です。

ダウンロード出来るからといって、webフォントとして使っていいわけではありません。ライセンスフリーのもの選ばないとないといけません。

日本語フォントの場合は容量が大きくならないように、使う文字のデータだけを読み込む処理をしたほうが良いです。

ブラウザ対応のために複数ファイルを用意しないといけなかったりもします。

有料フォントを使う場合は上記のことをやってくれているので、簡単ですが、無料のものを使うとき（特に日本語フォント）は正直結構めんどくさいです。笑

僕は自分のサイトであれば日本語のwebフォントは使いません。英語は1~2個くらいGoogle FontsかAdobe Fonts（Typekit）にあるものを使うことが多いです。このブログでも使っているので、興味がある方はディベロッパーツールを使って探してみてください。

webフォントサービスを使う

webフォントサービスは数多くあります。
どの案件でも使うわけではないし、有料のものを使うことは少ないので有名なものだけ紹介します。Google FontsとAdobe Fonts（Typekit）は僕もたまに使うので詳しく使い方を紹介します。

Google Fonts

– https://fonts.google.com/ – https://googlefonts.github.io/japanese/

Adobe Fonts（Typekit）

– https://fonts.adobe.com/typekit

FONTPLUS

– https://fontplus.jp/

TypeSquare

– https://typesquare.com/ja/

fonts.com

– https://www.fonts.com/ja

Google Fontsの使い方

ここではGoogle Fontsの使い方を説明します。
といってもめちゃくちゃ簡単です。

使いたいフォントを+マークを押して選択します。

様々な条件で絞り込み検索もできます。

選択したものは下のFamilies Selectedから見ることができます。

Families Selectedをクリックすると上の画像のようにhtmlとcssに貼り付けるコードが出てきます。

.roboto{
  font-family: 'Roboto', sans-serif;
}

.lexend-deca{
  font-family: 'Lexend Deca', sans-serif;
}

.title{
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 30px;
}

こんな感じで指定すればいいだけなので、簡単ですね。

因みに使いすぎるとGoogleさんにも注意されます。

Adobe Fonts（Typekit）の使い方

Adobeを契約している方は、Adobe Fontsを使うことが出来ます。
Adobeの契約自体は有料で、フォントに関してもライセンスや決まりが色々あるので、ご自身で確認してみてください。

• Adobe Fonts サービス追加条件
• ライセンスに関するよくある質問

Google Fontsと同じで様々な条件で検索することが出来ます。

使いたいフォントが見つかったら、コードマーク（</>）を押して選択します。

選択したらプロジェクト名を入力して終わりです。
1つ選択すると太字やイタリックなども入るようになっているので、使わないものはチェックを外してしまいましょう。この作業は後からでも出来ます。
完了したら『作成』を押しましょう。

これで終了です。
Google Fontsと同じようにhtmlとcssにコードを貼れば使えるようになります。
今回はプロジェクト名をtestにしています。ここに後からフォントを追加したり、追加したものを削除したりも出来ます。

My Adobe Fontsをクリックすると、Web プロジェクトから追加したものが見れます。そこでプロジェクトを編集やcssのコピーが出来ます。

これからwebフォントは一般的になる

今後は日本語フォントも含めて、webフォントを使う機会はどんどん増えてくると思います。
昔から言われてきた、『重くなる問題』もデバイスのスペックが上がったことやサブセット化の技術により気にならなくなり、一般的になると思います。

是非ここで説明したことを参考に使ってみてください。
くれぐれもライセンスにはお気をつけて！！