Google Fontsを使ってみる

Google Fontsの使い方のメモ。

使用方法

Google Fontsへアクセスし、フォントを選択します。
左側でフォントの絞り込み、右側上部でサンプルテキストの変更やサイズ変更が行えます。

今回は、Pathway Gothic Oneというフォントを選んでみます。
右下にある「Quick Use」のアイコンをクリックします。

使用するフォントのウェイトや文字セットを選択し、画面中段のlinkをHTMLのhead内に、font-familyをWebフォントを使用する要素に指定します。

head内

<link href='http://fonts.googleapis.com/css?family=Pathway+Gothic+One' rel='stylesheet' type='text/css'>

HTML

<p>Do you know why the snow is white?...Because it forgot what colour it was</p>
<p class="webfonts">Do you know why the snow is white?...Because it forgot what colour it was</p>

CSS

.webfonts {
	font-family: 'Pathway Gothic One', sans-serif;
}

Google Fontsのデモページ
上が通常のフォント、下がWebフォントになります。