Google Web Fontsの使い方

url

 

Google Web Fontsの導入方法についてメモ。

Google Web FontsはGoogleが提供しているクラウド上にあるフォントで、基本的には無料で商用利用も可能とのこと。

オフラインでも使えるようにダウンロードも可能ですが、今のところ日本語フォントの提供はありません。

公式サイトはこちらです。

 

やりたい内容

Google Web Fontsを読み込んで表示する。

作ったデモサイト

こんな感じです。

 

導入手順

 

cssをGoogleから読み込む

 

Google Web Fonts_1

 
公式サイトで好きなフォントを選択し、

 
スクリーンショット_2013-11-28_6.13.11-13

 

cssをコピーしてフォントをfont-familyに記載します。
あとはhtmlの各要素に対して指定してあげれば使用できます。

 

補足

代替フォントを指定しておく

Webフォントが指定されなかった場合に備えて代替フォントを設定しておきます。

	<style>
		body{
			font-family: 'Fenix', serif;
		}
	</style>

 

書体のオプション

書体のオプションはフォント名のあとに「:(コロン)」+オプション名記載で指定できます。

	<link href='http://fonts.googleapis.com/css?family=Fenix:bold' rel='stylesheet' type='text/css'>

 

複数のWebフォントを使いたい場合は、フォント名のあとに「|」で区切って指定します。

	<link href='http://fonts.googleapis.com/css?family=Fenix|Tangerine' rel='stylesheet' type='text/css'>

 

こんな感じでGoogle Web Fontsを使うことが出来ました。