Fonts」の使い方こんにちは。デザイナーのSUZUKIです。Fonts」というサービスを紹介します。Fonts」とはGoolgeが提供しているWebフォントサービスです。クラウド上に保存された大量のフォントから、お好みのフォントを選び、設定が可能です。すごいことに、すべて無料で利用でき、商用利用にも対応しています。制作会社にはありがたいサービスです。ちなみに現在は808のフォントファミリーが登録されています。Fonts」にアクセス。https://fonts.google.com/フォントファミリーが決まっている場合は(1)のところにフォント名を入れると、指定のフォントが(3)に表示されます。フォントが決まっていないなら(2)の「Categories」からセリフ、サンセリフなどを選択。「Sorting」からは人気順、アップ順などを選べ、「Languages」からは英語、アラビア語など言語を選べます。(2)で選んだ内容のフォントが(3)に表示されるので、お好みのフォントを探します。選んだフォントの詳細画面になります。今回は例として「Oswald」で紹介します。(1)のStylesで確認。text」に実際使う文字を入れて、文字サイズを指定して確認しましょう。問題なければ(2)のボタンをクリック。選んだフォントが登録され、画面下部に(1)エリアがでてくるので、クリックします。フォントの詳細設定画面になります。(1)をクリックしてフォントウェイトの指定をします。(1)で必要なフォントウェイトを選択します。ウェイト数が増える分、通信速度が遅くなるので、必要なものだけにするように心がけましょう。今回は「regular」と「bold」の二つを指定しました。(2)をクリックし、元の画面に戻ります。これでフォントの設定は終わりです。あとは実際のhtmlの<head>内に(1)を記述します。rel="stylesheet">次にスタイルシート内の使いたい場所に(2)を指定します。regular;}例としてh1タグに「bold」、pタグに「regular」のウェイトを指定しています。あとは表示がちゃんとできているか確認しましょう。以上が使い方の説明になります。欧文であれば、希望のフォントに出会えるはずです。Sans」の時と同様に導入もとても簡単ですね。通信速度もそこまで気にしなくても大丈夫です。それでもフォントセット多用は避けたほうがいいでしょう。フォントを厳選し、2、3個に抑えるのがいいと思います。サイトのターゲットや環境を考慮し、どんどん取り入れてみてはいかがでしょうか。そのうちオススメのフォントファミリーを紹介できればなと。参考リンク下記サイトは参考にしたサイトになります。詳しく知りたい方はどうぞ。http://oxynotes.com/?p=8121http://photoshopvip.net/90333http://lahtnas.hateblo.jp/entry/google-fontsこの記事は1年以上前の記事で内容が古くなっている場合があります。2016に参加してきました。【CSS】今更ながら、フレックスボックスの使い方をまとめてみた。