素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

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

投稿日:

スポンサーリンク

336×280




Google Fontsは有能

古き良き(?)文化

皆さんは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はフォントの数が多く、また導入時のカスタマイズ性がとても高いので、次回はそちらの使い方をまとめてみようかと思います。

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , ,

blogenist

Author: blogenist