Webフォントとは？
元来、ブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないフォントが表示されてしまい、デザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。
Webフォントのメリット
などが上げられます。
Webフォントのデメリット
- 読み込みに時間がかかる。特に日本語の場合は注意が必要。
Webフォントには主に２種類の使い方がある
GoogleFontsのようなネット上にあるWebフォントサービスを使う方法と、自身の持っているフォントデータをhtmlファイル等と一緒にアップロードし、表示させる方法があります。
GoogleWebFonts
GoogleFontsの使い方は非常に簡単で
１、まずは使いたいFontを選び、「Quick Use」ボタンを押す。
２、使用したいFont-weightやFont-styleにチェックを入れる
３、出力されたソースをHTMLに挿入する
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
複数のフォントを使用する場合、フォント名とフォント名の間に｜を入れましょう。
<link href='https://fonts.googleapis.com/css?family=Bangers|Ubuntu' rel='stylesheet'>
４、WebFontを使用したいタグにCSSで「font-family」を指定する。
font-family: 'Open Sans', sans-serif;
次に後者の「自身のフォントデータをアップロードし表示させる方法」をやってみます。
1、使いたいフォントデータをダウンロードする。
2、CSSに「@font-face」でフォントの指定をする。
@font-face { font-family: MyFont; /*任意の名前を付ける*/ src: url('fonts/againts.otf') format("opentype"); }
3、適用させたい要素に上で付けたfont-familyを指定する
h1 { font-family: MyFont; font-size: 40px; }
このように非常に簡単な記述でWebフォントは使え、最近は無料のフォントデータも豊富にあるのでぜひ使ってみましょう。
ただ、むやみに多種類のフォントを使う事はファイルの読み込みが遅くなり、デザイン的にも良くないので注意が必要です。また、個人・商用共にフリーのフォントでも再配布禁止のフォントはたくさんあるので、ライセンス確認は必ず行いましょう。
ダウンロードしたフォントの中にTrueTypeとOpenTypeの両方があった場合、Webサイト制作ではOpenTypeデータを優先的に使いましょう。
TrueType
TrueTypeは歴史が長く、様々なアプリケーションに使われている形式。特にWindows用のアプリケーションでは、いまだにTrueTypeのみをサポートしているというものが残っている。たとえば、年賀状ソフトや、WordやPowerPointの一部の機能はOpenTypeに対応していないものがある。
OpenType
TrueTypeより高度な機能を持たせた新たなフォント規格がOpenType。WindowsとMacとの間で互換性を維持できるようになっている点が特徴。
フリーWebフォント（欧文のみ）
www.dafont.com
Google日本語Webフォント Noto Sans Japanese の使い方
Googleは欧文書体だけでなく日本語のwebフォントも用意しています。
使い方は欧文のGoogleFontsと全く一緒で非常に簡単ですが、欧文と違い日本語はデータ量が非常に重いので、注意が必要です。
サイト内の日本語全文にwebフォントを使用すると、ファイルの読み込み速度が明らかに遅延するので、辞めましょう。
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjapanese.css">
スタイルシート内のNoto Sans Japanese のフォントを適用させたい要素に指定
font-family: 'Noto Sans Japanese', serif;
