WebフォントはWebサイトのデザイン性を確保し、SEOにも有利なサイトを実現する便利なフォントの技術です。
最近では多くのWebサイトで使われている技術ですが、詳しいことや使い方がわからない方も多いのではないでしょうか。
この記事はまだWebフォントをさわったことがない方のために、Webフォントの基礎やメリット・デメリット、基本的な使い方やおすすめのWebフォントサービスをご紹介します。
最後まで読んで、ぜひWebフォントに挑戦してみてください！
Webフォントとは、あらかじめサーバー上に置かれてるデータや、ネット上で配布されているデータを読み込んで表示させるフォントのことです。
通常Webサイトを表示する際、各端末にインストールされているフォントの中からCSSによって指示されたフォントを表示します。
しかし、一般的に端末にあらかじめインストールされているフォントは少なく、その場合は代替フォントで表示されるのです。
その結果、サイト製作者が意図しない表示状態になることもあります。
そんな問題を解決してくれるのがWebフォントです。
Webフォントを利用すればスマホやタブレット、パソコンといった閲覧環境に左右されることなく、同じフォントを表示できるようになります。
Webフォントを使えばどの端末で見ても同じフォントが表示されるなら、すべてのサイトで使えばいいと思いませんか？
しかし便利なWebフォントにもデメリットがあるため、注意が必要です。
Webフォントを利用する上でのメリット・デメリットを理解した上で、利用を検討してください。
1.デザイン性を保ったままSEOで有利に
フォントはデザインの中でブランディングイメージとして重要な要素です。
デザインに合ったフォントでそのまま表現したい場合、これまでは文字列を画像にして表現する方法がとられてきました。
しかし画像では文字情報として認識されず、alt属性を入れなければSEOに不利になります。
Webフォントなら画像ではなくテキストとして認識されるため、見た目を保ちながらSEOの面で有利に働きやすいのです。
また画像のようにぼやけて見えることなく、スマホで拡大表示しても美しく読みやすい文字を実現します。
2.テキスト修正が簡単
テキストを画像にして表現している場合、テキストを修正するたびに画像をつくる手間が必要になります。
そのため気軽にテキスト修正ができず、Webサイトの更新がしづらいという問題がありました。
Webフォントなら画像を利用せず、HTMLを変更するだけで素早くテキスト変更が可能になります。
1.日本語フォントは読み込みが遅くなりやすい
Webフォントではフォントデータを読み込んでから表示するため、フォントのデータサイズが大きくなれば表示するまでに時間がかかります。
日本語はひらがな・カタカナ・漢字と文字数が非常に多く、データサイズが大きくなってしまうので注意してください。
よく使う文字のみを残して軽量化（サブセット化）し、データサイズを小さくするのがおすすめです。
2.ブラウザによってズレて表示される可能性がある
閲覧するブラウザによって、文字のベースラインがズレる場合があり注意が必要です。
IEで表示した際、他のブラウザに比べてベースラインが上にズレてしまう現象が起こる場合があります。
その場合IEのみ別のフォントを表示するといった対処が必要になりますので、表示確認をしっかりしましょう。
それでは、実際にWebフォントを使う場合はどうすればいいのか、一般的な流れをご紹介します。
CSSの@font-faceルールを使い、表示したいフォントを読み込ませます。
読み込むフォントファイルがどこにあるのかを事前にチェックしましょう。
@font-face内で『font-family』を指定しますが、ここでは自分の好きな名前をつけられます。
@font-face {
font-family: myfont; /* Webフォントに好きな名前をつける */
src: url(font.woff); /* 使いたいフォントのURLを指定 */
}
@font-faceで読み込ませたフォントをCSSの『font-family』で指定し、HTMLに適用させます。
@font-face内の『font-family』で付けた名前を指定しましょう
body{
font-family:myfont; /* @font-faceでつけた名前を指定する */
}
様々な端末で同じフォントが表示されているか、実際に確認します。
問題なければ完了です！
便利なWebフォントですが、肝心のフォントはどこから読み込めばいいの？という方のために、おすすめのWebフォントサービスをご紹介します。
➡️ Google Fonts
Google Web Fontsは、商用・個人を問わず無料で利用できるGoogleのサービスです。
欧文フォントから日本語フォントまで様々な言語を幅広く提供しており、ライセンスも気にせず自由に利用できます。
非常に手軽にWebフォントを利用できるので、まずはGoogle Web Fontsから試してみるのがおすすめです！
1つのフォントから複数のウェイトを選んで利用できるため、見出しと本文といった使い分けも可能です。
しかし日本語フォントの場合データサイズが大きくなるので、複数のウェイトを利用するのはあまりおすすめできません。
Typesquareは日本のフォントメーカーであるモリサワが提供しているWebフォントサービスです。
和文フォントを中心に、国内外のフォントメーカーによるフォントを利用できます。
自分のサイトにWebフォントを適用したらどうなるかお試しできる、Web Font Tryoutというサービスがおすすめです！
Webフォント導入の前に手軽に試せるので、ぜひ一度お試しください。
利用ドメイン数や書体、月間PVによって料金プランを選べ、オプションで書体やドメインの追加利用も可能です。
PVが急に上がっても超過分の費用の加算で対応してくれるため、突然Webフォントが表示されなくなることはありません！
まるで画像で作ったようなカスタマイズのCSSサンプル集もありますので、ぜひチェックしてみてください！
➡️ FONTPLUS
FONTPLUSは600書体以上のフォントを利用できるWebフォントサービスです。
和文フォントだけではなく、国外のフォントメーカーによるフォントまで幅広く提供しています。
月間PV数10万まで月額1,100円（税込）という手軽な料金設定で、使えるフォント数の制限もなく、利用サイトの制限もないのが魅力的です！
利用する文字だけを読み込むサブセット化を自動で行ってくれるため、サイトの表示速度が遅くなる心配がありません。
6ヵ月間無料サービスを提供していますので、試しに導入しやすいサービスです。
レンタルサーバーの中には、サーバー契約者にオプションでWebフォントを手軽に利用できるサービスを提供している場合もあります。
サーバーによって無料で利用できる場合もありますので、条件や利用できるフォントも合わせてチェックしてみてください！
おすすめのレンタルサーバーが提供しているWebフォントサービスを3つご紹介します。
WordPressで利用するための独自プラグインを提供しているサーバーもありますので、ご利用方法をチェックして検討してください。
＼一流デザイナーのスキルが身に付く／
Webフォントはどの端末で見ても同じフォントで表示できるテキストデータです。
メリットやデメリットを理解し、効果的に利用してください。
デザインに合ったWebフォントを利用して、Webサイトの目的達成を目指しましょう！
![[初心者向け]フロントエンドエンジニアとは？求人数やバックエンドエンジニアとの違いなどを徹底解説](https://mash-jp.s3-ap-northeast-1.amazonaws.com/production/posts/34701/008695fe091f41ca6dd35cf649473bff027bb117.34778.phone.jpg)
