webサービスに気軽に新しいフォントを使いたい!とかどのブラウザでも同じように見えるようにしたいというときにwebフォントを使う。

Serifフォントとかだとブラウザによってどうやって表示されるかどうかが異なってしまい、webページの心象もだいぶ変わってしまう。

例えば以下. フォントcursiveの場合. (http://www.thothchildren.com/top?page=1 のタイトルバーより).フォントが見つからないとデフォルトが表示されることもあり、バラついてしまう。

Google Chrome:

Firefox:

Internet Explorer:

そこでGoogle Fonts APIを使ってどのブラウザでも同様に表示できるようにする。
webフォントの場合は、インターネット越しにそのフォントを取得してきて、それを表示するため、どのブラウザでも同様に表示される。

日本語フォントと異なってアルファベットなら取得するのも軽い。

GoogleFontsを自作webサービスで使う

ここでは”Allura”というフォント使った例を紹介します。

web上で自分の好きなフォントを用意する

https://fonts.google.com/にアクセスしてください。

Alluraで検索すると以下のように表示されます。

ちなみにここで検索結果のない文字を指定すると顔文字が表示されます笑

Alluraという部分をクリックして詳細を表示して、右上の+ボタンを押します。

そしたら以下のページが表示されます。これは後半の「自分のサービスまたはブログでの作業」で使います。

自分のサービスまたはブロブでの作業

1. ページの＜head＞に以下を記述(¥マークを消してください).さきほどGoogle Font APIに書いてあるものです。

<¥link href=”https://fonts.googleapis.com/css?family=Allura” rel=”stylesheet”>

2. そのあとで、使いたいところで、CSSに以下のように指定(¥マークを消してください)

font-family: ‘Allura’, cursive;

このようにするとどこのページでも以下のように表示されます。

おわりに

便利。各フォントは先週どの程度使われたかなどの数値が見れます。今見たら、Alluraの場合は、16.4M使われていたみたいです。USからよく使われているみたいですね。人気のフォントのようです。