Googleフォントの使い方・ダウンロードや日本語フォントの利用方法も

Webページ上のフォントはWindowsやMacなどのPC、iOSやAndroidなどのOSに依存しており、使用している機種によっては見た目の雰囲気が異なる。せっかくデザイナーが美麗に見えるようにWebページをデザインしても、OSによるフォント依存のせいで異なって見えたりする。

そこで異なるOSのプラットフォームでも同じように見えるようにしたのがCSS 3から導入されたWebフォントだ。Webフォントはサーバー上に置かれたフォントを読み込むことで、どのプラットフォームでも同じように見せる事ができる。

シェアする

目次

Googleフォントとは?

Googleフォントは「素晴らしいタイポグラフィを使ってWebをより美しく、速く、そしてオープンにする」をコンセプトに様々なデザイナーとGoogleが共同で様々なフォントを制作配布しているGoogleのプロジェクトの一つだ。

ライセンス

Googleフォントのライセンスは、オープンソースプロジェクトとなっており、オープンソースは「商用・非商用を問わず、誰でも利用することができ、自由に修正、頒布ができる」ので、基本的には無料で利用できる。(参照

Googleフォントの使い方

Googleフォントへのアクセスはこちら。
https://fonts.google.com/

使い方と言ってもさほど難しいことはないと思うが、軽く紹介。まずはヘッダー部分のメニュー。

  1. フォント検索
  2. サンプルフォントの例文の表示方法
  3. 例文入力で実際のフォントを表示しくれるが、日本語フォントの場合は⑦で日本語フォントを予め選択する必要がある
  4. フォントサイズ
  5. 背景の色変更
  6. セリフ、サンセリフ、手書きフォントなどのフォントカテゴリ選択
  7. 日本語フォントを使いたい場合はここから選択
  8. フォントンのスタイル数や太さ、イタリックなどを変更
  9. トレンド、人気順、新しい順、名前順の並び替え

個別フォントの表示メニュー。

  1. サンプルフォントの例文の表示方法
  2. フォントのスタイル
  3. フォントサイズ
  4. フォントの利用・ダウンロード
  5. フォント詳細

ダウンロードして使う

ダウンロードしてローカルから読み込んで使う方法だが、使用したいフォントの右上にある+のアイコンをクリック。フォントは複数選択肢てダウンロードできる。

するとFamily Selectedというメニューが表示されるのでそれをクリック。

下記の画面が表示されたらCUSTOMIZEを選択し、必要に応じてダウンロードしたフォントウェイトやイタリックの書体を選択。後は右上のダウンロードアイコンをクリックすればダウンロードができる。

スタイルシートから読み込むには、こんな感じで記述。

@font-face {
	font-family: 'Roboto' sans-serif;
	src: url(/font/Roboto-Light.ttf);
}
body {
	font-family: Roboto;
}

htmlファイルのヘッダーから読み込む場合はこんな感じで。

<link href="font/robot.ttf" rel="stylesheet">

なおダウンロードしたフォントはWindowsやMacにインストールして使うこともできるので、デザイン時からテキストとして使うことはもちろん、ロゴなんかに利用するのもいいだろう。

Google Fonts APIから読み込んで使う

Google Fonts APIから読み込んで使う方が楽。

使用したいフォントの右上にある+のアイコンをクリック。

Family Selectedというメニューが表示されるのでそれをクリック。

この画面が表示されたら、CUSTOMIZEを選択して必要に応じてフォントウェイトやイタリックを選択。

そしたら、EMBEDを選択してhtmlヘッダー、またはCSSから読み込むさせる方法のどちらかを選んでソースをコピペすればOK。

日本語フォントの使用

ヘッダーメニューでJapaneseを選択すると「Noto Sans JP」などの日本語フォントを利用できる。MicrosoftのメイリオもMeiryoで検索すると結果に表示されるが、外部の有料サイトに誘導される。

エフェクトの適用

使う場面があるかどうか分からないが、炎など、こんな感じのエフェクトをGoogleフォントに適用できる。

「Enabling font effects (Beta)」のあたりに記述の仕方が書いてある。
https://developers.google.com/fonts/docs/getting_started

// エフェクトの使用
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float

// 「&effect=」の後にエフェクト名を記述し、「|」で区切って複数を利用できる。
&effect=shadow-multiple|3d-float

// 利用する際はClass Nameを記述
class="font-effect-shadow-multiple"

おすすめのフォント

おすすめのフォントもいくつかを紹介。

Lato

個人的にはこれが好き。
https://fonts.google.com/specimen/Lato

Open Sans

https://fonts.google.com/specimen/Open+Sans

Noto Sans JP

数少ない日本語フォント。
https://fonts.google.com/specimen/Noto+Sans+JP

M PLUS 1p

これも数少ない日本語フォントの一つ。
https://fonts.google.com/specimen/M+PLUS+1p

反映されない場合の対処方

フォントが反映されない事として以下が考えられる。

ファイルのルート指定が違う

ありがちなのが、下記のようにファイルを置いている場所のルート指定が違う事が考えられる。

index.html
├font/robot.ttf
└css/style.css

@font-face {
	src: url(../font/robot.ttf);
}

スペルミス

これもあるかもしれないが、スペルミスや、小文字入力したつもりが英数の全角で入力してしまった場合も考えられる。

記述の順番

cssは基本的には、後述した記述を最優先して表示れるので、「!import」でを追記して反映されるなら、記述の順番に問題があると考えられる。

APIのURLが違う

サイトで再度URLを確認。

フォローする