ゆるくはじめるWordPress.

簡単!便利!Google Fontsの使い方

google-fonts

数百種類ものWebフォントを無料で利用できるとってもありがたい『Google Fonts』。
ダウンロード不要で利用できる点が何より手軽で嬉しい。しかも商用利用も可能。すばらしい。

そんな簡単便利なGoogle Fontsの使い方を画像付きで載せておきます。
Google Fontsを使う際の参考にどうぞ!

Google Fontsの使い方

フォントを選ぶ

google-fonts01

Google Fontsで好みのフォントを探します。左のFiltersでジャンルを絞り込むこともできます。Serif(ストロークの先に飾りの付いた書体)、Sans serif(ストロークの先に飾りのない書体)、Display(装飾付きのユニークな書体)、Handwriting(手書き風の書体)、Monospace(等幅書体)。

google-fontsボタン

使いたいフォントが決まったらフォントの下にある『Quick-use』ボタン(グレーボタンの真ん中)をポチっと。
『See all styles』ボタンは文字の太さや斜体などが選択できる場合はそのスタイルを確認する事ができます。
フォントを複数利用したい場合は『Add to Collection』ボタンで画面下のCollectionにどんどん保存されていくので、最後に『Use』ボタンを押せばまとめたコードを出してくれます。

google-fonts-collection

使いたいスタイルを選択

google-fonts-style

1. Choose the styles you want
スタイルが複数用意されている場合は、使いたいものをここで選びます。たくさん選ぶとPage Loadメーターがどんどん上がって重くなっていくので、不要なものは選択しないように。


使いたい文字種を選択

google-fonts-sets

2. Choose the character sets you want
フォントによっては、ギリシャ文字、キリル文字などの種類が用意されているので、必要ならここで選択。アルファベットや数字だけの使用ならデフォルトのLatinだけで大丈夫。


<link>コードをコピペ

google-fonts-html

3. Add this code to your website
表示されてるコードをコピーして自分のサイトの<head>~</head>内にペースト。


CSSにfont-familyをコピペ

google-fonts-css

4. Integrate the fonts into your CSS
フォントを適応させたい部分のCSSにコードをコピぺ。これでフォントが変化しているはずです!400などの太さが用意されているものはfont-weight: 400;のように書き加えます。

CSS

h1 {
  font-family: 'Metrophobic', Arial, serif;
  font-weight: 400;
}

WebフォントだからCSSで自由に色や大きさを変えられるし、レスポンシブデザインにも使いやすいので、webフォントを使ってみたいなと思ったらまずは簡単なGoogle Fontsをいかがでしょうか~。

関連

かわいいからカッコイイまで!Google Fontsおすすめ20選
ブログやサイトのタイトル、アイキャッチ画像に入れる文字など、Webデザインでもかなり役立つ『Google Fonts』。 フォントってそれだけで強い印象を持っているので、デザイン

スポンサーリンク

公開日:2016-1-20