webフォントの使い方、オススメの無料で使えるサイトも紹介！！

HTML/CSS

2019.08.16

この記事の内容

webデザインにおけるフォントの基礎知識
webフォントとは
webフォントの導入方法
Google Fontsの使い方
Adobe Fonts（Typekit）の使い方
これからwebフォントは一般的になる

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

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

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

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

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

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

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

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

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

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

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フォントの導入方法

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

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

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

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

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

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

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

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

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

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

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

Google Fontsの使い方

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

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

archive-fonts 使いたいフォントを押して、詳細ページに移動します。

select-style 使いたいフォントの右にある「+ select this style」を押して選択します。

detail-fonts フォントを指定すると右にサイドバーが表示されます。サイドバーには、選択したフォントやhtml, cssに貼り付けるコード、ダウンロードリンクなどが表示されます。

css

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

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

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