webフォント

Chrome
Firefox
IE11

webフォントとは
通常（比較用）
Google Fonts
- Google Fonts：日本語フォント「Noto Sans Japanese」
- Google Fonts：日本語フォント「Noto Serif CJK／源ノ明朝」
その他のWebフォント紹介
Webフォントでアイコンを表示
有名フォントに似ているWebフォント
Google Fonts + 日本語早期アクセス

webフォントとは

webフォントは、サーバ上にあるフォントを利用してブラウザに表示する、
CSS3で新しく追加された技術です。

今までは、ユーザの環境にインストールされているフォントによって、ブラウザの見え方が変わっていました。
webフォントを使えば、サーバー上にあるフォントを利用しブラウザに表示するので、ユーザーの環境に依存しません。
簡単に取り入れられるので、表現の幅が広がります。また、フォント重視で文字を画像化する必要が減り、更新しやすくなります。

元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。

出典：wikipedia
https://ja.wikipedia.org/wiki/Web%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88

使用の際は、各フォントのライセンスに注意が必要です。

通常（比較用）

向陽デジタルワークス

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

日本語フォント「Noto Serif CJK／源ノ明朝」

GoogleとAdobe が共同開発したフォント。
セリフ書体です。

2017年4月時点でCDN提供がされていないので、初回の読み込みが遅くなります。

向陽デジタルワークス　こうようでじたるわーくす　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");
}