WEBフォントを使ってみる!

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA