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サービス
デコもじ
もじでぱ
フォントプラス