Webフォントの使用方法

CSSでフォントを指定する際、フォントはそのPCに入っているものでないと使用することが出来ませんが、

Webフォントを使用すればそのPCにフォントが入っていなくとも使用することが出来ます。

使用方法

フォントのダウンロード

まずは使用する言語(日本語・英語等)にあったフォントをダウンロードします。

今回は、『たぬき油性マジック』という、フリーフォントを使用させて頂きました。

Webフォントを使用する際は著作権などに注意して使用しましょう。

フォントの読み込み

Webフォントを使用するにはフォントをCSSで読み込ませます。

@font-face {
	font-family:tanuki; 
	src:url("TanukiMagic.ttf") format("truetype")
}

とCSSにフォントを読み込ませるための記述をします。

『font-family』でCSS上で使用するためのフォント名を指定します。

『src』の『url』でフォントの場所を指定します。今回はCSSと同じ階層にあります。『format』には、フォントのフォーマットを指定します。こちらは、使用するフォントのサイトなどを見て下さい。

フォントの反映

次にフォントを読み込んだら使用します。

使用方法は通常のフォント指定と一緒で、先程指定したフォント名を記入します。

body{
	font-family: 'tanuki';
}

と、指定をするとbodyにたぬき油性マジックのフォントが適用されます。

簡単に使用できますが、1つWebフォントの欠点としては、読み込む際にフォントも読み込むため重くなってしまいます。

使用する際は、この辺も考慮してください。