webフォント

Chrome
Firefox
IE11
IE9
iPad（iOS7）

各フォントのライセンスを確認して使用してください。

通常

向陽デジタルワークス

KOYO DIGITAL WORKS

Google Fonts

KOYO DIGITAL WORKS

使い方

html内にリンクタグを記述し、ネットワーク上のcssを読み込みます。

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

cssで、読み込んだフォントを使用してfont-familyを指定します。
```
.ffwebFont01{
font-family: 'Joti One', cursive;
font-size:1.4em;
}
```

サービスが終了したら、使用できなくなる恐れあり。

日本語フォント

Noto Sans Japanese

GoogleとAdobe が共同開発したフォント。
文字の太さが豊富です。

向陽デジタルワークス　こうようでじたるわーくす　KOYO DIGITAL WORKS

Webフォント

はんなり明朝

向陽デジタルワークス　はんなり明朝

KOYO DIGITAL WORKS

ほのか明朝

向陽デジタルワークス　ほのか明朝

KOYO DIGITAL WORKS

フロップデザインフォント

向陽デジタルワークス　フロップデザインフォント

KOYO DIGITAL WORKS

やさしさゴシックボールド

向陽デジタルワークス　やさしさゴシックボールド

KOYO DIGITAL WORKS

使い方

cssで@font-faceを設定します。

@font-face {
font-family: font1;
src: url('../webfonts/UtsukushiMincho_FREEFONT/Utsukushi.otf') format("opentype");
}

cssで設定したフォントを使用して、font-familyを指定します。
```
.ffwebFont01{
font-family: 'font1', cursive;
font-size:1.4em;
}
```

IEはeotファイルのみ対応なので、@font-faceを2つ指定する必要があります。

/* IE */
@font-face{
font-family: font07YasashisaBold;
src:url('../webfonts/07YasashisaBold/YasashisaBold.eot');
}
@font-face {
font-family: font07YasashisaBold;
src: url('../webfonts/07YasashisaBold/YasashisaBold.ttf') format("truetype");
}

Webフォントでアイコンを表示

class指定に「fa-2x」や「fa-3x」を追加すると、大きさが変わります。

他にもアイコンや設定いろいろ
参考URL：http://weboook.blog22.fc2.com/blog-entry-388.html

有名フォントに似ているWebフォント

小塚ゴシック × Noto Sans

KOYO DIGITAL WORKS

Futura Bk BT × TeX Gyre Adventor

KOYO DIGITAL WORKS

参考URL：http://liginc.co.jp/web/design/font/68373