eyecatch google 20150821

google WEBサービス

Google Web Fonts の使い方。

2015/08/21

通常、ブラウジングする時に表示されているフォントは、各PCにインストールされているものしか表示させることは出来ません。
サイトのロゴや見出しなど部分部分にインストールされていないフォントを使いたいという場合は、画像にしたり、似たフォントを代替して表示させるのが一般的です。
しかしやはり画像を作成するのが面倒であったりするのは自明の理。

そこでWEBフォントというものの登場。
大体想像がつくとは思いますが、WEBフォントとは、WEBサーバ上にあるフォントを利用し、手軽にインストールされていないフォントを使えるようにするサービスのことです。
中でも今回紹介する「google web fonts」は、公開されているフォントは全てオープンソースで、商用・非商用を問わず無償で利用可能。利用するのに会員登録なども必要なく、気軽に使え、さすがグーグル、と言いたくなるサービスです。

というわけで、その使用方法をポストしてみたいと思います。

Google Web Fonts の使い方

基本的な使い方

概略を書くと、下記4ステップです。

  1. HTML、CSSを作成
  2. Google Web Fonts http://www.google.com/webfonts にアクセスし、使いたいフォントを選択
  3. HTMLのヘッダに、選択したフォントを記述
  4. CSSに font-family を記述

以下、詳細です。

1. HTML、CSSを作成

フォントを指定したい箇所にスタイルを与えておいてください。
今回のサンプルはhtmlとstyleを分けずに、htmlファイルに直接書いています。

2. Google Web Fontsにアクセス

上記URLにアクセスし、「Start choosing fonts」ボタンをクリックします。
フォント一覧が表示されるので、使用したいフォントを選び、[Quick-use] をクリック。
今回は「Berkshire Swash」というフォントを題材とします。

google web font 手順1

google web font 手順2

3. HTMLのヘッダに、選択したフォントを記述

画面が移ったら、少し下にスクロールし、「3. Add this code to your website」にある、

をコピーし、htmlファイルの&lr;head>~</head>内にペーストします。

4. CSSに font-family を記述

次に「4. Integrate the fonts into your CSS」にある font-family 文をコピー、CSSにペーストします

google web font手順3

成功しているとブラウザで以下のように表示されます。

googlewebfont_05_sample

実際のサンプルはこちら。
サンプル表示

最終型のサンプルコードはこんな感じです。

簡単ですね!

ちなみに、現段階では英字フォントしかないので注意。
色々と日本語フォントが使えるようになれば面白いんだけど、ロードするのに時間がかかりそなので、現実的ではないかな。。。

-google, WEBサービス
-, , ,