Google Fontsの使い方

f:id:aotree423:20171126105531p:plain

(この記事は2017年11月29日に書かれた記事です)

今回は、無数のおしゃれFontを無料簡単に利用できるサービス、Google Fontsの使い方を紹介します。 

 

自身ポートフォリオサイトを、HTML, CSS, JavaScriptの練習を兼ねて作成していたのですが、フォントについてはオシャレ感のあるWebフォントを使用したく、数あるWebフォントの中でも個人利用/商用利用問わず無料で使用できるGoogle Fontsを使ってみました。

Google Fontsとは

Googleが提供するWebフォントのオープンソースディレクトリで、全てのフォントが個人利用/商用利用問わず無料で使用できます。

Google Fonts利用手順

1.Google Fontsにアクセス

f:id:aotree423:20171126145157p:plain

Google Fontsにアクセスします。

https://fonts.google.com/

2.好みのフォントを探す

f:id:aotree423:20171125222248g:plain

好みのフォントを探し、右上のプラスボタンを押下して追加していきます。

  • 例文は好みのテキストに変更することができる(APPLY TO ALL FONTSを押下)
  • 右サイドバーのフィルターで好きなカテゴリのフォントのみを表示できる
  • 複数のフォントを追加できる

3.太字や斜体を使用する場合の設定をカスタマイズ

f:id:aotree423:20171126013459g:plain

太字や斜体など、複数のウェイトやスタイルを持つフォントを追加した場合、使用するウェイトやスタイルにチェックを入れます。

4.HTML/CSSGoogle Fontsの取り込みを指定

f:id:aotree423:20171125124933g:plain

ページ下部の黒いバーをクリックして追加したフォントの確認画面を表示します。

この後、フォントの取り込み方法を指定することで、ウェブサイトでGoogle Fontsが使用できるようになります。

HTMLファイルにリンクタグで追加する方法(4-1)と、CSSファイルに@importルールを追加する方法(4-2)がありますので、順に説明します。

4−1.HTMLファイルにリンクタグを追加

f:id:aotree423:20171126011356g:plain

STANDARDのタブに、<link>タグによるフォントの取り込み方法が書かれていますので、コピーしてHTMLの<head>タグの内部にペーストします。

4−2.CSSファイルに@importルールを追加

f:id:aotree423:20171126011404g:plain

@IMPORTのタブに、@importルールが書かれていますので、コピーしてCSSの@charsetルールの次の行にペーストします。

※ @charsetルールがない場合、先頭にペースト

終わりに

f:id:aotree423:20171126144641p:plain

今回、私は自分のポートフォリオサイトに「Poiret One」というフォントを使用しました。

f:id:aotree423:20171126142333g:plain

ちなみに右サイドバーでカテゴリのチェックを全て外すと、「No fonts found!」というメッセージとともに、顔文字が表示されます。

遊び心があっていいですね。

広告を非表示にする