Saki Web Design
ずっと気になっていたWEBフォントを使ってみました！そのWEBフォント使い方のメモです。
メリット
- ユーザー端末にフォントがインストールされていなくても、そのフォントで表示できる！
デメリット
- ロードする時間が気になる。
（使用する文字だけのサブセットを作ることで、少し回避されます。） - 日本語の種類が少ない。
実際に、使ってみましょう。
■WEBフォントを選んで、サーバーにアップします。
Google Web Font だと、直読みしに行きますので、自分でアップしなくてもOKです。
フォント利用のライセンスを必ず確認しましょうね。
■CSS3 の @font-face でフォントファイルを指定します。
css@font-face {
font-family:"フォント名";
src:url("xxx/xxx/フォント名.eot?") format("eot"),
url("xxx/xxx/フォント名.woff") format("woff"),
url("xxx/xxx/フォント名.ttf") format("truetype"),
url("xxx/xxx/フォント名.svg#") format("svg");
}
Google Web Font の場合は、cssを提供してくれますので、それをコピペします。
あとは、いつも通りコーディングして使います。
webfont【例】
■CSS
#sample { font-family:"フォント名";}
■html
<div id="sample">このフォントは「フォント名」です。</div>
以上、簡単ですねv
