テック・ガジェット・写真とか

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

AD

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. トレンド、人気順、新しい順、名前順の並び替え

Googleフォントの使い方

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

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

Googleフォントの利用

ダウンロードして使う

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

Googleフォントで使用したいフォントを選択

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

GoogleフォントのFamily Selectedを選択

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

Googleフォントをカスタマイズしてダウンロード

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

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

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

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

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

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

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

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

Googleフォントで使用したいフォントを選択

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

GoogleフォントのFamily Selectedを選択

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

選択肢Googleフォントのカスタマイズ

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

GoogleフォントをAPIから読み込む

日本語フォントの使用

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

GoogleフォントでNoto Sans JPが使える

エフェクトの適用

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

Googleフォントにエフェクトを掛ける

「Enabling font effects (Beta)」のあたりに記述の仕方が書いてある。

https://developers.google.com/fonts/docs/getting_started

エフェクトの使用

Copy
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float

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

Copy
&effect=shadow-multiple|3d-float

利用する際はClass Nameを記述。

Copy
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

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

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

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

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

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

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

スペルミス

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

記述の順番

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

APIのURLが違う

サイトで再度URLを確認。