WEBフォントってなに？
まずWEBフォントの前に、「フォント」について少し。
フォントとは、文字の書体データのこと。デザイン物の印象を決める書体データのこと。
印象良く見えるフォントががないと、OS標準の読みやすいがかっこいいとは言えない可読性重視のフォントを使ってデザイン物をすることになる。
フォントが違うだけで受ける印象は大きく変わる。
文章が読み手に与える印象を大きく変えることができる。
よりファンシーに、よりガーリーに。より男らしいインパクトのあるサイトへ。
「フォント」を自分のパソコンにインストールして使うことで、同じ文章でも様々な印象を作ることができるようになった。
それを画像や印刷物だけでなく、
ウェブサイトの表示テキストに反映できるようにしたのが「WEBフォント」。
だが困ったことに、ウェブで指定したフォントはパソコンにインストールされていないと、表示されない。
ちょっと困ったことに、最初からインストールされている標準のフォントは、OSによって異なる
フォントは、ローカル環境での設定が基本のため、WINDOWS、MAC、LINUXでそれぞれ基本となっているフォントが違う。
ゴシック体（サンセリフ体）の場合
WINDOWS
MSゴシック
MS Pゴシック
MS UI Gothic
▼Vistaで追加
メイリオ レギュラー/メイリオ ボールド
▼7で追加
Meiryo UI レギュラー/Meiryo UI ボールド
▼8.1で追加
游ゴシック Light /Regular/Bold
▼10で追加
游ゴシック Medium
Yu Gothic UI Light/Semilight/Regular/Semibold/Bold
MAC
Osaka/Osaka等幅
ヒラギノ角ゴ Pro W3/W6/ヒラギノ角ゴ Std W8
▼v10.5 Leopardで追加
ヒラギノ角ゴ ProN W3/W6/ヒラギノ角ゴ StdN W8W8
▼v10.9 Mavericksで追加
游ゴシック体 ミディアム/ボールド
▼v10.11 El Capitanで追加
ヒラギノ角ゴシック W0～９
▼v10.12 Sierraで追加
凸版文久ゴシック Pr6N R/DB
凸版文久見出しゴシック StdN EB
となっており、それぞれフォントが違うため、font-familyで複数指定しない場合は、OSごとに違う標準のフォントで表示されることとなる。
※WEB制作初心者がやりがちなミスの一つとして、自身の環境で表示されているからと言って、自身の環境にインストールされているフォントでfont-familyを設定している失敗例を見かけることがあるが、他人には、OS標準のフォントで閲覧されているため、表示が崩れたり、おかしな表記になったりする、要注意。
WEBフォントとは？
IE8（一応IE6から対応してるらしい）以降で利用できるようになったWウェブサイトのフォントを美しく、OSやブラウザに依存せず表示させるサイトカスタマイズ手法。
SEO対策などにも有効とされるため、英語圏で使われ始め、ネット回線が高速化するにつれ、徐々に普及した。
※SEO効果としては、今まで画像だった部分をテキスト化するとSEO等で引っかかりやすくなるからSEO対策に効果的とされている模様。
WEBフォント＝フォントをWEB上にアップロードして、サーバーから閲覧者に読み込ませることで、奇麗かつ、フォントの違いによる表示崩れを無くすカスタム。
と思っていれば、まず間違いない。
WEBフォントの弱点、それはデータサイズ。
WEBフォントの大きな弱点として、日本語圏で使われるフォントデータサイズ問題がある。
通常パソコンにインストールする日本語フォントデータは英語圏のフォントデータ(約500kb程度)と比べ、ひらがな＋カナ漢字の表示に対応するため、（大体JIS第1水準漢字・第2水準漢字まで対応しているデータの場合、その数7000文字弱）5～10MBほどあり、WEBフォントとしてそのまま使用するとサイトの読み込み速度を著しく下げるため、使用が控えられてきた経緯がある。
その上、多数のブラウザに対応するため、WEBフォントにはeot,ttf,woff,woff2などの様々な種類があり、IE6以降に完全に対応しようとすると、4種類全部読み込まなくては行けない。
WEBフォント向けに軽量化が施されているが、それでも2M近い。
これを回避する手段は、「使わない」「何とかしてサイズを小さくする」「JAVASCRIPTとか、別プログラムでどうにかする」「高速なサーバーを使う」と言った所。
「何とかしてサイズを小さくする」の場合、自分のサイトで使う漢字だけ登録して、フォントデータを作り直し、サイト表示を軽くしよう！とうたうサイトも結構あるようですが、めんどくさい上、そんなことやるくらいならその時間を記事書く時間に回したほうが良いと思う。下手すると、記事書くたびに、漢字調べて、フォントファイル作り直さなくちゃならないなんて考えると無理無理。
「JAVASCRIPTとか、別プログラムでどうにかする」
これは、有料サービスのものがほぼ該当。web上に表示している文字データをスキャンして、再描写する方法。
実際の導入方法。
今回ご紹介する方法は「高速なサーバーを使う」に該当。
googleのサーバーからWEBフォントをロードし、とっととWEBフォントを利用する方法。
HTMLサイトの場合
1,HTMLの-の間に下記を追加。
< link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet"/>
2,CSSに下記を追加する。
body{
font-family:"Mplus 1p",YuGothic, "Yu Gothic", 游ゴシック体, 游ゴシック, Helvetica, Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
これだけ。
wordpressで使いたい場合
WordPressのサイトでstyle.cssに設定をしたい場合は、1を書かずに、2を下記の様に。
@import url(https://fonts.googleapis.com/earlyaccess/mplus1p.css);
body{
font-family:"Mplus 1p",YuGothic, "Yu Gothic", 游ゴシック体, 游ゴシック, Helvetica, Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
本来@importはサイトのレンダリングにwaittimeが発生する原因となるため、おすすめしませんが、wordpressでheader.phpとかいじらずに導入したい人多いみたいなので、参考例として。
＠importに関しては、「css @import」とかで検索すれば、情報出てきます。
http://dev.classmethod.jp/ria/html5/css-import-no-parallel-load-sass/ とか。
何をした？
何をしているかと言うとgoogleがCDN上で配布している日本語WEBフォントの[m+1p]というフォントを利用し、それをサイトの内のフォント表示に設定する。
という状態です。
CSS内において、他の要素に個別でfont-familyが指定されている場合は、別途指定が必要なので、適宜削除するか、書き換えて下さい。
https://googlefonts.github.io/japanese/
Google Fonts + Japanese Early Access
WEBフォントは、上記のサイトで配信されているデータなので見ておくべき。ここで紹介したM+ 1p 以外にもnoto sansやココロ明朝なども利用可能。
googleが取り組んでいる安心感。そして速度面でメリット有り。
自分のサーバーに組み込んで使いよりも、早くて、負荷も軽い。そしてgoogleという安心感。
制作の際、本番環境で利用しても、急にサービス終了を告知されたりして、焦ることは多分無い。
通常のサイト運用においても結構良い漢字。
自社サーバーなら100人の同時アクセスで100～200MB 近いロード負荷がかかるが、外部サーバーからの読み込みならサーバー本体に負荷は少なくて済む。
この安心感は、何にも代えがたい。実際の読み込み時間も驚くほど早いし。
欲を言えば、もっと使えるフォントが増えて欲しい、そんな所。
それまで自分で、色々試行錯誤しながら、WEBフォントを使っていた自分がバカみたい。と思えるほどに便利だったので、ご紹介してみました。
WEBフォントで検索しても、この方法あまり載ってないみたいなので、お試しあれ。
コメントを残す