Google Web Fonts API を使う

Categories : API, Google, Web

GoogleWebFonts …. アカウント登録不要で、全てのフォントがオープンソース(SIL Open Font License （OFL）)。

● Google Web Fonts API
● Google Web Fonts List
 
 
①リストから使いたいフォントを選んで、Quick-use をクリック。
　　※ Preview Text:　にテキストを入力して確認できる。

 
② Add this code to your website:に表示されているタグをHTMLにコピペ。フォントのスタイルを追加。

 
HTMLに追加するタグ

<link href=’http://fonts.googleapis.com/css?family=’Playball’ rel=’stylesheet’ type=’text/css’>

 
スタイルシートにフォントのスタイルを記述

.webfonts {
font-family: ‘Playball’, cursive;
font-size: 48px;
color:#59493f;
text-shadow: 4px 4px 4px #A6937C;
}

 
 
 

A Drawerful of Sweet Memories.

(Playball を使用) 

 
 

複数のフォントタイプを読み込む
<link href=’http://fonts.googleapis.com/css?family=’Ruge+Boogie|Ribeye+Marrow|Metamorphous’ rel=’stylesheet’ type=’text/css’>

 
( | )で区切って、複数のフォントを読み込む。また、フォント名にスペースを含む場合は、スペースの部分を( + )に置き換える。
 
 
A Drawerful of Sweet Memories.

(Ruge Boogie) 

A Drawerful of Sweet Memories.

(Ribeye Marrow) 

A Drawerful of Sweet Memories.

(Metamorphous) 

 

イタリック、ボールドを指定してフォントタイプを読み込む
<link href=’http://fonts.googleapis.com/css?family=’Marko+One:bold’ rel=’stylesheet’ type=’text/css’>

 
フォント名の後ろにコロン( : )をつけて、スタイルを指定する。スタイルを複数指定する場合は、カンマ( , )で区切る。
 
 
A Drawerful of Sweet Memories.

(Marko One) 

 

文字を指定してフォントを読み込む（Beta）

リクエストした文字に対して、最適化されたフォントファイルを取得する。必要な文字のみを効率的に取得して表示できる。
サイトのロゴなどに使用。

<link href=’http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC&text=Drawerfuls’ rel=’stylesheet’ type=’text/css’>

 
text= に文字列を指定する。
  Drawerfuls

(IM Fell DW Pica SC) 

 

ブラウザサポート
    ● Google Chrome: version 4.249.4+
    ● Mozilla Firefox: version: 3.5+
    ● Apple Safari: version 3.1+
    ● Opera: version 10.5+
    ● Microsoft Internet Explorer: version 6+
     
    モバイルデバイス: Android 2.2+, iOS 4.2+ (iPhone, iPad, iPod)

 
 
 
*********************************************************
 
 
＜その他参考項目＞

サイトで使用されているフォントを表示するChromeのExtension

WhatFont
 

 

日本語WebFontサービス

デコもじ
もじでぱ
フォントプラス