使用手順

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フォントがなかなか見つからない、という場合はチェックしてみることをオススメします。