【簡単便利】Webフォントで有名なGoogle Fontsの導入方法と使い方まとめ【Webデザイン】

古き良き(?)文化

皆さんはWebデザインを行う際に、テキスト画像(文字だけの画像)を使っていたりしますか？

昔に作られたホームページでは、メニュー名や人物名のテキスト画像を書き出して、imgタグで読み込ませている手法をよく見かけます。

全くもって無駄

しかし、この作業とても無駄が多いです。

などなど。

他にもあげるときりがありませんが、上記の通りあまりオススメ出来ません。

Webフォントを使おう

そんな不満点は、Webフォントを使えば解消することが可能になります。

Webフォントとは、Web制作の中で使用することが可能なフォントとなっており、無料のものから有料のものまで幅広くあります。

また、このフォントはCSSによって色やサイズ、テキストの変更を簡単に行うことが出来るので、毎回変更のたびにファイルに書き出すこと無くコーディングのみで様々な表現をすることが可能です。

GoogleFonts

そして、そのWebフォントの中でも無料かつ多くのFontを提供しているのが我らがGoogleのGoogleFontsです。

今回はGoogleFontsの導入から使用までをご紹介致します。

公式サイトで使用するフォントを選ぶ

まずは公式サイトにアクセスします。
すると、様々なフォントが表示されるので今回はMeriendaを導入してみようと思います。
対象フォントの＋アイコンをクリックします。

すると、Family Selectedというスネークバーが表示されますのでクリックします。
複数選択することも可能なので、その場合は複数のフォントを選んでからクリックしましょう。

サイトへの導入

すると、以下のようなモーダルが表示されるので、linkタグの文字列をコピーして、headタグに追記しましょう。

正常に読み込まれていますね。

CSSの設定

では、実際にGoogleFontsを設定してみましょう。

今回は、CSSにて以下のタグに適用させてみます。

先ほどのモーダルのSpecify in CSSの一文をコピーして、上記のタグへのCSSを記述します。

確認

では、実際に確認してみましょう。

正常に反映されていますね。

以上のように、会員登録などの作業が不要で簡単に導入することが出来ました。

GoogleFontsはフォントの数が多く、また導入時のカスタマイズ性がとても高いので、次回はそちらの使い方をまとめてみようかと思います。