ウェブフォント

システムフォントはユーザーが使用している端末のOSにインストールされているフォントのため、Webサイト作成者が意図したとおりのフォントで表示されるとは限りません。表示されるフォントをデバイス間で統一できない点がデメリットです。

それをデバイスを問わず統一されたフォントを表示できるようにするのがウェブフォントです。

サーバーにアップされているフォントを読み込んでWebサイトを表示するため、デバイス内のフォントデータの有無にかかわらず、意図したとおりのデザインにすることが可能です。また、フォントの選択肢が多くデザイン性の高いフォントを使用できるというメリットもあります。

デメリットとして、ページの読み込みに時間がかかる可能性があります。また、日本語のWebフォントは欧文フォントと比べて種類が限られていることや、利用料金がかかるフォントもあるといった点もデメリットとして挙げられます。

フォントを提供してくれているサイトは色々ありますが、使いやすいサイトをピックアップしておきます。

Google Fonts	Google Fontsとは、米Google 提供の完全無料でWebフォントを使用できるサービスです。
Adobe Fonts \| 無制限のフォントを検索	「Adobe Fonts」は、アドビシステムズ社が提供するサブスクリプション形式の有料フォントライブラリサービスです。
フォント一覧 \| Webフォント TypeSquare [タイプスクウェア]	「TypeSquare」は、株式会社モリサワが提供する有料Webフォントサービスです。月額課金型のサブスクリプションモデルです。

Google Fontsのつかいかた

代表的で無料のGoogle Fontsの使い方を簡単に説明します。

まずはホームページに行くとこういう画面が出ると思います。

自分が使いたいフォントをクリックすると

こういうページに移管しますので、右上のフォントを取得をクリック。

すると画面が変わるので、右にある二つの項目のうち上の埋め込みコードを取得するをクリック。

１，まずは上にあるHTMLの<head>にコードを埋め込むのところからコードをコピーを押して自分のサイトの<head>内にコピー。コピーする場所はCSSファイルの読み込みリンクの上。（必ず上にコピーしてください。）

２，同じページにある、少しスクロールさせたところにあるCSSクラス（自分が使いたいもの）のコードをコピーしてCSS内に貼り付けてください。（これはbody { }内にコピーしてください。）

３，ファイルを保存しブラウザで確認。

※ちなみに複数のページを作成する場合は、それぞれのhtmlファイルにこの記述が必要なので注意してください。

かなりざっくりとした説明になってしまいましたが、概ねこれでOKです。

何個でも埋め込めますが、読み込み速度が遅くなるので注意しましょう。

文字サイズも選べますが、それは追々慣れてからでよいと思います。

こういうことも出来るんだなって感じで頭にとどめておいてください。