急いでいる方は↓これをCSSにコピペするだけでOKです。時間のあるかたはもう少しお話をお聞きください。注意点やもっと良くする方法をご説明します。目次Webフォントのメリットデザインの幅が広がるパソコンでもスマホでも端末に関わらず同じフォントを表示させることができるWebフォントのデメリットフォント容量が大きいWebフォントの使い方ダウンロードする方法Webフォントを軽くするスタイルシートにCSSを記述する外部読み込みする方法Webフォント使い方まとめWebフォントのメリットデザインの幅が広がる日本語フォントはそれほど多くありませんが、それでも選択肢は増えています。英字フォントだとさらに多いのでデザインの幅が広がります。これまで画像で表示していたタイトルもテキストで表示できるようになります。パソコンでもスマホでも端末に関わらず同じフォントを表示させることができる「メイリオ」などはWindowsには標準インストールされていますが、Macやスマホにはありません。Webフォントなら端末に依存しないので端末に関わらず同じフォントを表示させることができます。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。JP」をそのまま読み込もうとすると25.7MBにもなります。25.7MBは一瞬で読み込める容量ではありません。読み込んでいる間は文字が表示されません。これではユーザーが離脱するだけでなく、SEO上も不利になる可能性があります。ダブルパンチとして結局読み込めず標準フォントが表示されることがあります。これではWebフォントを設定した意味がありません。よってWebフォントを使うときはこの容量を軽くすることが重要になってきます。軽くする方法も含めて「Webフォントの使い方」をご説明します。Webフォントの使い方まずは使いたいフォントを探しましょう。以下の記事を参考にしてみてください。無料で商用利用できる日本語フォントを比較しやすいように一覧化しました。漢字が使えるフォントに絞っています。この記事を読むここでは使い勝手のいい「Googleフォント」の使い方についてご説明します。Fonts」サイトへ行きます。「Languese」を「Japanese」にして日本語フォントに絞り込みましょう。日本語のフォントは8種類ありますので、好きなフォントをクリックします。JP」を例に説明します。ここで「ダウンロードする方法」と「外部読み込みする方法」で設定方法が変わります。ダウンロードする方法オススメの方法です。後述する「外部読み込みする方法」だとIEで読み込めない場合があります。フォントファイルの容量を減らすことができ、高速表示しやすいです。family」をクリックします。「Noto_Sans_JP.zip」がダウンロードされますので、解凍しましょう。JP」の場合、6個のファイルがあります。ファイルが複数あるのはそれぞれ文字の太さが違うためです。いろいろな太さのフォントを使えるのはメリットではありますが、一方で容量が重くなるという無視できないデメリットがあります。6つ全部読み込もうとすると25.7MBにもなります。これは一瞬で読み込める容量ではないため、文字がしばらく表示されなかったり、結局標準フォントで表示されてしまうことがあります。これを避けるためにこのダウンロードしたWebフォントを軽くする方法を紹介します。※軽くするのは必須ではありませんが、あなたのサイトにとってもあなたのサイトに訪れるユーザーにとってもメリットのある手段です。Webフォントを軽くする11ファイルだけ使う6つファイルがありますが、全部使う必要はありません。「Regular(細め)」か「Medium(太め)」だけにしましょう。これだけで25.7MB→4.4MBと容量が1/6になります。「font-weght:bold」を使えば、太いフォントにもできます。2必要な文字だけに絞り込むフォントファイルには普通使わないような文字や記号などが含まれています。必要な文字だけに絞り込むことで容量を減らすことができます。サブセットフォントメーカーをダウンロード&インストールします。サイトの下部分「Ver3.2.0のダウンロード」をクリックします。ダウンロードしたファイル「subsetfont320.msi」をインストールしましょう。インストール後、自動では起動しないのでWindowsメニューから「サブセットフォントメーカー」を探して起動しましょう。「作成元フォントファイル」の「参照」からダウンロードしたotfファイルを選択します。「作成後フォントファイル」の「参照」から書き出し先フォルダとファイル名を設定しましょう。元のファイルを上書きするとやり直せなくなるので上書きしないよう別名にしましょう。「フォントに格納する文字」に下記をコピペします。+-×÷=<>°′′′¥$%#&*@※〒0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわをんァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヲンヴヵヶ!"`"'1234567891011121314151617181920IIIIIIIVVVIVIIVIIIIXXP`p!1AQaq"2BRbr#3CScs$4DTdt%5EUeu&6FVfv'7GWgw(8HXhx)9IYiy*:JZgz+;K[k{,N^n~/?O_j最後に「作成開始」をクリックして完成です。これで4,384KB→485KBと1/9にまで減らせました。当初読み込ませようとしていた25.7MBと比べると2%以下になっています。こちらは第一水準漢字と各記号が含まれています。逆に、漢字全部もいらない、特定のタイトル・ロゴにだけなど使用する文字が決まっている場合はその文字だけを「フォントに格納する文字」に設定するとさらに容量を減らすことができます。指定文字は重複して問題ありません。スタイルシートにCSSを記述する「サブセットフォントメーカー」で作ったotfファイルをサイトのフォルダに設置したら下記のようにCSSに記述します。Japanese';}@font-faceのfont-familyは任意で設定できます。日本語でも大丈夫です。ここで設定した文字列をbody等に設定するfont-familyと一致させましょう。@font-faceのsrcはサブセットフォントメーカーで作ったotfファイルを指定します。相対パスに気を付けて設定しましょう。内部リンクなどファイルの場所を指定するとき、パスを指定することになります。パスを理解しないとリンク切れや画像が表示されないということになりかねません。そんな相対パスと絶対パスについて説明します。この記事を読む「ダウンロードする場合」についてはこれで完了です。外部読み込みする方法ダウンロードせずに外部読み込みさせる方法です。「高速表示しなくてもいいから手っ取り早く済ませたい!」というかたはこちらの方法がオススメです。フォントファイルの容量を削ることはできませんが、ユーザーが他のサイトで同じフォントファイルを読み込んでいて、端末がキャッシュ(記憶)していたら読み込む時間が0になるというメリットもあります。外部読み込むする方法は、IEでは表示されない場合があるようです。IEユーザーがあまり想定されないサイトならこちらの方法でもよいかと思います。さきほどのGoogleフォントサイトにてフォントを選択した画面です。style」をクリックします。複数の太さを使用する場合は複数選択します。複数選択するとその分読み込む容量が増えるので最小限にしましょう。500(太め)」がオススメです。family」が表示されます。表示されない場合は右上のメニューアイコンをクリックしましょう。3「Embed」タブをクリックし「@import」タブをクリックします。4<style>の中身をCSSに記述します。5「font-family・・・」をbodyなどフォントを指定したい箇所に設定します。複数選択していた場合は「font-weight:400」など太さを設定すると良いでしょう。「外部読み込みの方法」は以上です。Webフォント使い方まとめGoogleフォントサイトなどからフォント(otfファイル)をダウンロードダウンロードしたotfファイルから1つだけ選択するサブセットフォントメーカーで軽量化するCSSで設定するWebフォントを使いつつ軽量化・高速化して快適なサイトにしましょう。以上、Webフォント(Googleフォント)の使い方と高速化【容量2%以下まで減】でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。