Webサイト上で重要な要素の一つにフォントが挙げられます。
最近では、多くのホームページでWebフォントを採用することが増えており、これまでできなかった表現が可能となっています。

今回は、Webフォントの概要と、Webフォントの使用手順を解説します。
併せて、オススメのWebフォントサイトも紹介していますので、ぜひ参考にしてみてください。

Webフォントとは

これまでのフォント指定は、CSSで「font-family」というコードでフォントを指定して文字を表示させていました。
ただし、ユーザー側の閲覧環境にフォントがインストールされていなければ、表示できないというデメリットがあったため、使用できないフォントも多数ありました。

それらの問題を解決するのがWebフォントで、あらかじめサーバに格納してあるフォントの情報を提供することで、閲覧しているユーザー側のOS環境に左右されず、正しく表示することができます。
ちなみに、このWebフォントの機能は、CSS3から追加されました。

既に多くのWebサイトで使用されていますが、最近ではGoogleが日本語Webフォントをクラウドで提供開始したことで、さらにその使用率は上がっています。

Webフォントのフォーマット

Webフォントのフォーマットには、様々な種類があります。
ここではその一例をご紹介します。

WOFF(Web Open Font Format)

2009年にMozilla Foundationで開発されたフォントファイルの形式の一つです。
TrueTypeやOpenTypeフォントと同様のフォントデータですが、さらに使いやすいように圧縮したり、著作権情報などのメタデータを加えたりした形式です。
各種主要ブラウザが対応しています。

EOT(Embedded OpenType)

Internet Explorer 4でサポートされたフォントフォント形式です。
圧縮されていることが多いので、ファイルサイズは小さいですが、Internet Explorerでのみ対応しています。
Microsoftでは、Web Embedding Fonts Tool (WEFT) というユーティリティが提供されています。

SVG(Scalable Vector Graphics)

JPEGやPNGのようなビットマップデータではなく、イラストレーターで使用するベクターデータを扱う画像フォーマットのことを指します。
これを応用したフォントフォーマットです。

テキストファイルなので、テキストエディタで内容を確認することができます。
GoogleChromeなどの一部Webブラウザでのみ対応しています。

SVGZ(gzip圧縮されたSVG)

SVGを圧縮したものです。
SVGZフォントのファイル拡張子を.svgzから.gzに変更し、解凍ツールで展開することで、SVGフォントと同じ内容になります。

TrueType

パソコンにインストールして使うフォントそのもののことです。
Apple社とMicrosoft社が共同で開発したフォントで、WindowsとMacのパソコンには標準的にインストールされています。
フォント形式によっては曲線の描画方法に違いがあり、TrueTypeフォントでは二次Bスプライン曲線で描画されています。
多くのフリーフォントはTrueType形式で作られていますが、含まれている文字セット数はOpenTypeフォントに比べて少なめです。

OpenType

TrueTypeと同様、PCにインストールして使うフォントそのもののことです。
Adobe社が開発したフォント形式で、DTP(Desktop publishing)を行う際に標準的に使用されています。
OpenTypeのフォント形式は、イラストレーターでできる曲線同様、三次ベジェ曲線で描画されています。
文字セット数が非常に多いことが特徴です。

使用手順

Webフォントを使用する際の手順を解説します。
なお、フォントを使用する際は必ずライセンス確認を行いましょう。
著作権フリーとされていても、再配布が禁止されている場合があります。

STEP1.フォントファイルを読み込ませる

CSS3の@font-faceでフォントファイルを読み込ませます。
@font-faceは、使用したいフォントを指定するための規則です。
「font-family」でWebフォントに名前を付けますが、この際、実際のWebフォントの書体名とは関係なく、自由に名前を決めることができます。
また、第三者のサーバ内にあるフォントを使用する際は、そのサーバを指定して使用するため、絶対パスになります。

１

STEP2.Webフォントを適用させる

CSSでフォントファイルを読み込ませたら、HTMLで正しく表示されるように指定します。
CSS、HTMLそれぞれで書きのような記述をします。

CSS
２

HTML
３

STEP3.確認作業

最後に、実際のブラウザで正しく表示されているかを確認します。
できていればこれで完了です。

Google Web Fontsを使用してWebフォントを表示させる場合

4
Noto sans Japanese

Google Web Fontsは、商用・個人を問わず誰でも無料で利用できる、Googleから提供されたフォントそのものです。
Googleのアカウントがなくても使用することができます。
2014年10月より、日本語フォント「Noto sans Japanese」が提供開始されました。
バリエーションが豊富で、用途に合わせた様々なデザインを使用することができます。

ダウンロードページを開いて、検索ボックスで、「Japanese」と入力すると、日本語で使用するフォントのみダウンロード可能です。

5

ダウンロードしたら、zipファイルを解凍します。
すると、日本語のフォントが数種類表示されるので、使用したいフォントを選択します。
選択したら、あとは上記で紹介した手順を踏めばブラウザで表示できます。

Webフォントサイトのご紹介

1.Typesquare

http://typesquare.com/

和文フォントで有名なサイトです。
日本のフォントメーカーの「モリサワ」が提供しているサービスです。
サンプル集や、実際に使用したいWebサイト上でどのように表示されるのか、プレビューしてみることができるコンテンツもあるので、非常に使いやすいサイトです。

2.Font Squirrel

http://www.fontsquirrel.com/

高品質なだけではなく、商用でも無料で使用できるフォントをまとめているサイトです。
スタイルごとにカテゴライズされていて、現在は約300書体が登録されています。
利用する際のライセンスについては、各ページに記載がありますので、確認してから使用するようにしましょう。

3.LETS Membership Website

https://www.lets-member.jp/

複数のメーカー、高品質かつデザイン豊富なフォントがすべて使用できる年間契約のフォント導入システムサイトです。
欧文はもちろん。日本語、韓国語、中国語にも対応しています。
Webフォントだけではなく、写真素材やプラグインなども提供されていますので、デザイナー必見のサイトです。

4.Adobe Edge Web Fonts

https://edgewebfonts.adobe.com/fonts

世界的なコンピュータ・ソフトウェア会社のAdobeが提供しているWebフォントサイトです。
膨大な数のフリーフォントが提供されています。
デザイナーなら必ずと言っていいほどご存知であろうAdobeのツールなので、デザイン性には定評があります。

5.AW Conqueror

http://typofonderie.com/fonts/aw-conqueror-family/

デザイン性が非常に高く、高品質なフリーフォントを提供しているサイトです。
個人でも商用でも、無料で使用することが出来ます。
とにかくオシャレ度抜群のデザインが豊富なので、イメージにピッタリ合うWebフォントがなかなか見つからない、という場合はチェックしてみることをオススメします。

まとめ

いかがだったでしょうか。
意外と簡単に設定できることに驚かれた方もいるのではないでしょうか。
Webフォントを使用できると、デザインの幅が広がり、Webサイトを閲覧しているユーザーに、より企業のブランドイメージを認識してもらいやすくなります。

まだまだ日本語対応のWebフォントは少ないですが、今回ご紹介したWebフォンとサイトや、Googleから提供されている「Noto sans Japanese」でも十分にデザイン性を高めることができるので、ぜひ利用してみてください。

このニュースを読んだあなたにオススメ

制作に関するカリキュラム
コミカルなデザインで活用したいマンガ風フォントまとめ
【保存必須】ジャンル別フリーフォント素材228まとめ

このニュースに関連するカリキュラム

制作に関するカリキュラム

制作に関するカリキュラム

ホームページは、パソコンでもスマートフォンでも同じプログラムでできています。プログラムを組むことで、私たちはホームページを読むことができるのです。それがタグです。 ホームページにおける基礎技術であるタグについて解説します。 なお、わかりやすさを優先させるため「厳密に言うとそこまで言い切れない」といった内容であっても、言い切る文体で書いていますところをご理解ください。