Google Font APIの使い方

Google Fontへのリンクが変更になったので、変更(2017/07/03)

先日、Googleから、Google FontGoogle Font Developpers APIがリリースされました。

まだ英字のフォントのみですが、これから日本語のフォントも追加されることを期待しています。

さて、このAPIを使うことによって、Web上のフォントを、クライアントが持っていないフォントで表示できるようになるわけですが、これはデザイナーにとってはかなりのアドバンテージになるのではないでしょうか?まぁ、APIという、ちょっと純粋なデザインとは違う部分が出てきますが、それはコーディングで何とかなるでしょう(^^;)

ということで、わざわざブログに書くことでもないかも知れませんが、Google Font APIの使い方をちょっとメモ。

準備はとっても簡単。

<head>内にて、Google Font APIのCSSを呼び出すだけ。

以下のように打ちます。

<link href="https://fonts.googleapis.com/css?family=fontname" rel="stylesheet">

fontnameの部分に呼び出したいフォントを書き足します。

例えば、Tangerineというフォントを使いたければ、


<link href="https://fonts.googleapis.com/css?family=<span class="collection-drawer-emphasized-code ng-binding">Tangerine</span>" rel="stylesheet">

と書きます。

これで準備完了です。

実際にそのフォントを表示する部分で、以下のように指定します。

<span style="font-family: 'Tangerine', serif; font-size: 48px;text-shadow: 4px 4px 4px #aaa;>Evolutionary Designs</span>

もちろん、このCSSの指定はインラインではなく、CSSファイルでの指定もできますよ。

日本語ブログでは無理ですが・・・ページ全体をそのフォントにしたければ、

body {
	font-family: 'Font Name', serif;
}

といった具合になりますし、各セレクターで指定することもできます。

h5 {
	font-family: 'Tangerine', serif;
	font-size: 48px;
	text-shadow: 4px 4px 4px #aaa;
}

と言った感じです。

ブログのタイトルくらいだったら使えるかも・・・・