Fonts(グーグル・ウェブフォント)の導入方法と使いのまとめです。Webサイトをデザインする際、フォントはWebサイトの雰囲気を左右する重要な要素になります。HTMLやCSSが初心者の方でも分かるように丁寧に解説していきます。Fontsとは?このように、利用できるフォント一覧が表示されます。完全無料でWEBフォントを使用できます。WEBフォントとは?Webフォントとは、あらかじめサーバ上に置かれたフォントやインターネット上で提供されているフォントを呼び出して表示する仕組みのことです。通常のフォントの場合WEBページを閲覧する端末にインストールされているフォントしか表示できません。システム)のバージョンにより、標準搭載されるフォントが異なるため、使用できるフォントも限られていました。WindowsかMacかiPhoneかAndroidかによって標準搭載されているフォントも異なるため、統一した文字を表示させることができないわけですね。WEBフォントを利用するとWEBフォントであれば、サーバーから読み込むため、どの端末でも共通のフォントで表示させることができます。】SEO効果を保ったまま、デザイン性を高めることができるWebフォントの最大のメリットは、デザイン性の高いサイトの構築ができる点です。ユーザー環境に寄らず、豊かなデザイン表現が可能となったことで、作成者の意図する印象を与えることができたり、文章の可読性・視認性を高めることができるようになりました。従来は、デザイン性の高いサイトを構築する際、デザインフォントを含む箇所を画像としてWebサイトに配置してきました。この方法では、検索エンジンの情報収集ロボット「クローラー」に画像と判定され、記載した文字情報は理解されません。多彩なスタイルを持つWebフォントの出現でテキスト表現の幅が広がり、クローラーにしっかりと内容を伝えられ、かつデザイン性の高いWebサイトが構築できるようになりました。【メリット2】レスポンシブWebデザインに適しているスマートフォンなどのモバイル端末の普及やGoogleが推奨したことで、現在のWebサイト構築方法の主流となっているレスポンシブWebデザイン。画面サイズの異なる複数のデバイスに対応するWebサイトでは、折り返し位置やサイズ調整が自動で行われる「テキスト」での表現が最適です。従来のようなデザイン性の高い箇所を画像で配置する方法では、対応するデバイス分の画像パーツの用意が必要になるなど、構築にも更新にも手間と時間が掛かります。Webフォントの出現は運用コストの削減にもつながっています。ページの読み込み速度は遅くなる?使用するフォント種類が増えるほど重くなりますが、Googleの高速サーバーから読み込むことができるので、数種類の英語WEBフォント使用であれば気にならないはずです。Fontsに日本語はあるの?日本語フォントが正式に採用されました。(2018年10月)サイドバーの「Language」で「Japanese」を選択すれば、日本語フォントのみを表示することができます。完全無料でWEBフォントを使用できます。使い方や設定方法などは英語のフォントと同じです。フォントファイルが数MB〜数十MBとかなり重くなってしまうことがあるので注意しましょう。日本語はひらがな・カタカナに加えて無数の「漢字」まで読み込まなければならないため重くなるわけですね...。表示速度を取るか、フォントの美しさを取るか、判断が難しいところです。Fonts、日本語は通常の指定で利用する方法もあります。Fontsの導入方法と使い方を解説します。利用ページにアクセスまずはこちらのページを開きましょう。Fonts利用できるフォントがずらっと表示されます。下にスクロールすればフォントがどんどん表示されます。この中から使いたいフォントを選びます。フォントの探し方については後ほど説明します。導入手順をちゃちゃっと解説しちゃいます。使用するフォントを選ぶ使いたいフォントがあったときは右上のをクリックします。すると画面下側のリストの中に追加されます。使いたいフォントが複数あるときはそれもで追加しましょう。クリックすれば削除することができます。太さなどのスタイル設定をする追加が済んだら、画面下の黒いバーの「-」をクリックしましょう。これで追加した文字の設定ウィンドウが開きます。ウィンドウの上部には追加されているフォントが一覧で表示されます。その下にある[CUSTOMIZE]をクリックします。ここで太字や斜体を使うかどうかを決めることができます。初期設定では普通の大きさのフォントしか使わない設定になっています。太字や斜体を使いたい場合は、使いたいスタイルにチェックを入れます。スタイル数が多くなるほど読み込みデータが重くなるので、本当に使うものにだけチェックを入れましょう。HTMLにフォントの読み込みコードを貼るスタイル設定ができたら[EMBED]をクリックします。rel...というコードが載った部分があるはずです。これをまるっとコピーします。コピーしたコードは<head>〜</head>の中のどこかに貼ります。ブログサービスによって貼り方は少し異なります。【参考】CSSから読み込む場合HTMLをいじらずにCSSから読み込むこともできます。その場合は@importをクリックして表示されるコードをまるっとコピーしてCSSファイルのどこかに貼りましょう(@charset〜のすぐ下で良いかと思います)。CSSでfont-familyを指定あとはCSSでfont-familyに使いたいフォント名を記載するだけです。Fontsに戻ります。ウィンドウの下側にある「font-family:’◯◯’」というところでフォント名が確認できます。これをコピーしてfont-familyに追加します。font-familyの指定の仕方こちらの記事を参考にすると良いかと思います。font-familyの書き方まとめ:CSSでフォント種類を指定しようもしCSSにfont-family:〜が書かれている場合、その中の1番先頭にフォント名を貼り付けます。'フォント名',...}というように書きます。'フォント名',...}というように書きます。サルワカくんこれらのWEBフォントは日本語を表示できないので、日本語のフォント名と合わせて書くのがおすすめです。表示される!これで導入完了です。ページを読み込めばWEBフォントが表示されるようになります。表示させたいときは?WEBフォントを太字で表示させたいときにはCSSで指定をします。font-family:〜;と合わせてfont-weight:boldと書けば太字で、font-weight:lighterとすれば細字で表示されます。詳しくはこちらの記事が参考になるはずです。Fontsにはたくさんの種類のWEBフォントが登録されています。目的に合ったフォントを効率的に探せるようにフィルターを使いこなしましょう。画面右上の虫メガネのアイコンをクリックします。すると検索のフィルターメニューが表示されるようになります。1つずつ見ていきましょう。Serifのチェックを外すことで「明朝体のフォントだけ表示させる」というようなことができます。Serifはゴシック体、Displayというのは華やかな装飾のある書体、Handwritingは手書き文字、Monospaceは1文字の幅が全て同じフォントのことです。太さや斜体でフィルターをかけるフォントによって太字や斜体の数が異なります。太さを7種類から選べるフォントもあれば、太字を全く使うことのできないフォントもあります。以下の4つのフィルターを使うことで「ものすごく太いフォントだけ表示させる」ようなことができます。styles:指定できるスタイルの数(太字と斜体の数)。Thickness:太さ。右につまみを動かせば太字のものだけ表示、左に動かせば細字だけ表示Slant:斜体。右につまみを動かすと斜体フォントだけが表示。右ほど斜め具合が強くなるWidth:文字幅。人気順や新着順で並び替える[Sorting]を変えることで並び順を変更することができます。Fontsではフォントごとにサンプル文字列が表示されています。この文字列は簡単にカスタマイズできます。文字列を変える変えたい文字列にカーソルを当て、Deleteを押せば消えます。そのまま試したい文字を入力すればOKです。全例文を統一した方が比較しやすいですね。FONTS]をクリックすれば、全例文が同じ文字列になります。初期設定では見出しっぽく例文が表示されています。[Sentense]をクリックして[Paragraph]を選べば、例文を段落文に変えることができます。◯◯pxと表示されている部分のつまみを調整することで表示される文字の大きさを変えることができます。太さを変更その左隣にある[Regular400]というところからはサンプル文字の太さを変えることができます。Fontsをうまく使えばユニークでオシャレなWEBサイトに見せることができます。いえ「オシャレ=読みやすい」ではないので、読ませたい部分で使うときには注意が必要ですね。