Google Fontsの使い方

2018.11.25

Google Fontsとは、無料でWebフォントを使うことができるサービスです。簡単にWebfontを導入することができますし、商用利用も可能なので便利ですよ。ということで今回はGoogle Fontsの使い方についてみていきましょう。 まず、Google Fontsにアクセスます。 googlefonts 右のメニューにフォントのカテゴリーや言語などを選ぶことができる欄があるので、欲しいフォントの種類にチェックします。 googlefonts 一覧の文章の欄に、任意の文章を入力し、「APPLY TO ALL FONTS」をクリックすると、すべてのフォントに同じ文章が適応されます。 googlefonts これでフォントの比較がしやすくなりましたね。 googlefonts 次に、気に入ったフォントがあったら、右上の「+」をクリックします。 googlefonts すると、ウィンドウの下部にぴょこっとバーが出てきます。 googlefonts バーをクリックすると、選択したフォントの使い方詳細が出てきますので、「CUSTOMIZE」をクリック。 googlefonts フォントの太さと言語選べるので、好みのものにカスタマイズします。 googlefonts 「EMBED」をクリックし元に戻り、①はHTMLのheadの中に、②をCSSで指定するときに使います。 googlefonts インポートしたいときは「@IMPORT」をクリックし、以下のコードを適用しましょう。 googlefonts 以上でWebフォントの導入が完了です。簡単なので、ぜひ使ってみてくださいね!