Webフォント 2014.12.01
Webデザイン Webフォント
フォントは面白いですよね。
フォントが違うだけで、文章が持つ印象はガラリと変わります。
人間は本来、形でものを判断しています。
文章の中身よりも、見た目の印象はとても重要だと思います。
読む気にさせるフォントでないと、せっかく良い文章を書いても読んでもらえないわけですから。
でも、私はデザインの世界に入るまで、フォントについてそれほど意識せずに生きてきました。
今さらその重要性がわかり、Webデザインにもその特性に適したフォントを使いたいと思っています。
今回はフォントの中でも、「Webフォント」を取り上げます。
INDEX
- Webフォントとは
- Webフォントのメリット
- Webフォントの実装方法
1.Webフォントとは
ここで説明するWebフォントは、CSS3から使えるようになった機能の一つです。
フォントデータをサーバ上に設置し、Webページを読む込む際にそのフォントも一緒に読み込むことで、自由にフォントを表示させることができるようになりました。
これまではどうだったのかというと、ユーザーのデバイスに入っているフォントでしか表示することができませんでした。
そのため、欧文フォントだとArial、Verdana、Georgia、Comic Sansといった中から選んでいました。
Webデザインをする人にとっては、かなり苦しい条件だったのです。
どうしてもデザイン上、使用したいフォントがある場合は、デザインソフトで画像としてスライスし、画像文字として使っていました。
画像文字はデメリットが多く、SEOの観点からも多用することは厳禁です。
2.Webフォントのメリット
Webフォントのメリットは、前述の画像文字のデメリットを解消した上で、自由にフォントを使うことができることです。
具体的には以下の点です。
- 作業スピードの向上と作業の引き継ぎができる
- 様々なデバイスに対応できる
- SEO対策として非常に有効
- テキストをコピー&ペーストできる
- 拡大・縮小してもぼけない、つぶれない
- 読み上げに対応している
デザイナーとしては、特に作業面での便利さが際立ちます。
HTMLで入力するだけでよく、デザインソフトを使用できない人でも容易に内容変更できる点はいいですね。
また、スマホやタブレットなど、多様なデバイスでWebページを見る昨今。
拡大・縮小は常ですし、画像で対応するとコードが多くなってしまうところを、わずかなコードで実現できるところも大きなメリットです。
これらのことから、Webフォントは、現代的なWebページを作りたい場合、ほぼ必須であると言えます。
3.Webフォントの実装方法
さて、これらの便利なWebフォントを実際にWebページに取り入れるには、大きく2つの方法があります。
Case1．持っているフォントファイルを使う
一つは、自分のPCに入っているフォントをサーバーにアップして使う方法です。
具体的には、CSSにWebフォントを使いますよ、と定義するところから始めます。
それには@font-faceを使います。
|
1 2 3 4 5 6 7 8 9 |
@font-face { font-family: 'フォント名称'; src: url('../fonts/フォント名称.woff')format('woff'), /*2種類指定の場合はカンマで区切る*/ url('../fonts/フォント名称.ttf')format('truetype'); url('../fonts/フォント名称.eot?')format('eot'); /*EOT形式はIE8以前対応のためフォント名称の後に"?"を入れる*/ url('../fonts/フォント名称.svg#sample')format('truetype'); font-weight: normal; /*念のため記述した方がいい その１*/ font-style: normal; /*念のため記述した方がいい その２*/ } |
記述例は上の通りです。
@font-faceの補足としていくつか説明しますと、
まず指定したフォントデータは先に記述したものが優先されます。
上の例ですと、WOFF→TTF→EOT→SVGの順ですね。
加えてWOFF、EOT等のフォントフォーマットはブラウザによって変わってきます。
詳しくは下に書いた「フォントフォーマットについて」を読んでください。
また、2種類以上指定する場合はカンマで区切るのですが、EOTの場合は例外です。
なぜかというとIE9ではカンマ区切りは認識しないからです。
よって、カンマで区切らずEOTは別に記述します。
このEOTがやはりIE専用フォーマットだけあって、やっかいです。
詳しくは後述しますが、
上記の記述例の通り、記述した場合、IEへの対応が半端なものとなりますのでご注意を。
IE8以前への対応を見送る場合は問題ないです。
フォントフォーマットについて
各ブラウザによってサポートしているフォントフォーマットが違います。
| WOFF形式 （Web Open Font Format） |
Web用に開発された形式 データが軽い 主要ブラウザ最新版にほぼ対応 |
| EOT形式 （Embedded Open Type） |
IEで表示させるための形式 |
| TTF形式 （True Type Font） OTF形式 （Open Type Font） |
デスクトップアプリケーションで多く使われている形式 |
| SVG形式 （Scalable Vecter Graphics） |
フォントをベクターグラフィックスの画像として表示させる形式 |
対応状況
| WOFF | TTF | OTF | EOT | SVG | |
|---|---|---|---|---|---|
| Firefox | ○ | ○ | ○ | ||
| Safari | ○ | ○ | ○ | ○ | |
| Chrome | ○ | ○ | ○ | ○ | |
| Opera | ○ | ○ | ○ | ○ | |
| IE | ○ ※1 |
○ ※1 |
○ ※1 |
○ | |
| iOS | ○ ※2 |
○ ※3 |
○ ※3 |
○ | |
| Andoriod | ○ ※4 |
○ ※4 |
○ ※5 |
※1 … IE9以上が対応
※2 … iOS5.x以上が対応
※3 … iOS4.2以上が対応
※4 … Android2.2以上が対応
※5 … Android3.x以上が対応
IE8以前への対応について（@font-face決定版）
この項目はIE8なんてどうでもいいよ！って人は飛ばしてしまって結構です。
さて、繰り返しになりますが、EOT形式はIE専用のフォントフォーマットです。
IE9以上であれば、WOFF形式が対応しているので、EOT形式は記述の必要はありません。
なので、EOT形式を記述する＝IE8以下に対応するということです。
@font-faceのIE8以前への対応方法は調べるとたくさん出てきます。
その中でも、これはいいなーと思ったのを一つ取り上げます。
|
1 2 3 4 5 6 7 8 9 10 |
@font-face { font-family: 'フォント名称'; src: url('../fonts/フォント名称.eot'); /* IE9専用 */ src: url('../fonts/フォント名称.eot?#iefix') format('embedded-opentype'), /* IE6-IE8に対応 */ url('../fonts/フォント名称.woff') format('woff'), /* モダンブラウザ用 */ url('../fonts/フォント名称.ttf') format('truetype'), /* Safari, Android, iOS用 */ url('../fonts/フォント名称.svg#svgFontName') format('svg'); /* iOS4.1以下用 */ font-weight: normal; font-style: normal; } |
詳細は参考にしましたこちらのWebページに書いてありますが、
上記の記述だと、ほぼすべてのブラウザでWebフォントを使用できると思います。（未検証）
フォントファイル変換
さて、実際に@font-faceを使ってWebフォントを導入しようとすると、様々な形式のフォントファイルが必要となります。
そんな時に便利なのがフォントファイル変換ソフトです。
私が実際に使用したのは、
fontsquirrel.comにある「webfont-generator」
二つとも有名どころで、検索すれば詳しい使い方も出てくると思います。
前者は、フリーソフトで日本語化されていて使いやすいのですが、SVG形式への変換ができません。
後者は、ブラウザ上で変換するのですが、ファイルサイズが大きすぎると変換ができません。
場合によって両方使い分けることをおすすめします。
日本語フォントはサブセット化がほぼ必須
また、日本語のフォントファイルはファイルサイズが大きすぎるため、Webフォントには向いてないという大きな欠点があります。
そこで サブセット化 を行うことで、ファイルサイズを大幅に軽減することが可能です。
サブセット化とは、フォントファイルの中から必要なフォントだけを抜き出すことを言います。
サブセット化は、
武蔵システムの「サブセットフォントメーカー」
を使うと簡単にできます。
例えば、ブログのタイトルだけにフォントを使用したい時は、「ブログのタイトル名」をソフト上で入力すれば、その文字だけしか入っていないフォントファイルが出来上がります。
残す文字の数を減らせば減らすほど、ファイルサイズも少なくなります。
全体の流れとしては、
「サブセットフォントメーカー」でフォントファイルをサブセット化→
変換ソフトで各形式に変換
という流れになります。
ちなみに私の場合は、各記事の見出しにWebフォントを使用したかったため、
第一水準漢字という日常でよく使われる漢字 ＋ アルファベット ＋ ひらがなカタカナ ＋ 一部記号
という組み合わせでサブセット化しました。
第一水準漢字のテキストファイルを探すのが大変でしたが、こちらで見つけることができました。
参考までに。
手っ取り早く@font-faceでWebフォントを導入したい
Webフォントを使う最も簡単な方法は、後述するWebフォントサービスを利用する方法です。
が、Webフォントサービスで日本語に対応しているものは少なく、対応しているものは有料がほとんどです。
日本語Webフォントを無料ですぐ使ってみたいという方は、「M+Web FONTS Subsetter」がとても便利です。
「M+Web FONTS Subsetter」は、フリーフォントの「M+ OUTLINE FONTS」を使用したサブセットツールです。
サブセット化→変換までを一括で行ってくれる上、CSSコードまで作成してくれるすぐれ物です。
（※自動生成されるCSSコードはファイルの場所等は手直しする必要があります。また、SVG変換は未対応のようです。）
他にも、ひらがな・カタカナ・アルファベットのみですが、「Japan Sans」も、簡単に導入できると思います。
ライセンスの話
フリーフォントをWebフォントとして使いたい場合、ライセンスも重要なポイントとなってきます。
ライセンスは基本的に制作者が持っているものなので、まずはフリーフォント制作者の配布サイトの要項を熟読してください。
ここではよくあるライセンスの種類について説明します。
SIL Open Font License （詳しくはこちら）
フォントの使用、研究、改変、再配布を、それ自体を販売しない限り自由に行うことを許可
著作権表示は任意（参考）
mplus Font License（詳しくはこちら）
改変の有無に関わらず、また商業的な利用であっても、自由にご利用、複製、再配布することが可能 無保証
著作権表示は任意
IPA フォントライセンス v1.0（詳しくはこちら）
改変、商用利用、複製可。ただし再配布においては細かい規定あり 権利は制作者が有する
ライセンス表示は必要
よもつネットさんの「Webフォントとライセンス」を参考にしました。
上記はあくまで参考として捉えて下さい。
Case2.Webフォントサービスを使う
Webフォントを使うもう一つの方法が、Webフォントサービスを使う方法です。
Webフォントサービスは、サービス会社のクラウドサーバにあるフォントを借りるサービスです。
フォントデータ自体はサイト制作者ではなく、クラウドサーバにあります。
そのため、フォントファイルの変換やサブセット化をする手間はかかりません。
また@font-faceの記述も必要ありません。
ほとんどがHTML上に指定されたコードを書きこむだけの簡単な方法で利用できます。
（サービス会社によって、詳しい利用方法は異なります。）
特に欧文フォントはファイルサイズが小さいことなどから、かなり普及していて、無料でできるサービスもわりとあります。
最もメジャーなのは「Google Fonts」ですね。
日本語化されていないので、まだ使いづらい面もありますが、一度覚えてしまえば簡単に使えます。
また、使い方も検索すればたくさん出てきます。
その他にもWebフォントサービスは以下のようなものがあります。
有料サービス
fonts.com
世界最大フォントメーカーMonotype運営 定番欧文フォント多数 和文フォントも
TypeSquare
大手フォントメーカーモリサワ運営 和文フォントが豊富
FONTPLUS
国内フォント―メーカーの書体多数 和文フォントメイン
Adobe Typekit
Adobe運営 Creative Cloud利用者は無料 ほぼ欧文フォントのみ
アマナイメージズ WEBフォント
１書体単位で利用できるため、利用フォント少ない場合安く運用できる
デコもじ
比較的安く利用できる POP系和文フォントメインで欧文フォントもあり
無料サービス
Adobe Edge Web Fonts
Typekitの無料版 欧文フォントのみ
最後に
Webフォントは比較的簡単に導入できる技術の一つだと思います。
もう少し有料版の価格が安くなるといいのになぁ、と個人的には思いますが、仕事で使うとなると仕方ないのかもしれませんね。
フォントについての知識を深めて、もっと上手く使えるよう頑張ります。
Thanks for reading to the end!!