UPDATE：2016.10.5
- CATEGORY
- 行動心理学と集客
商用フリーのフォントをWEBで使ってみる
こんにちは、アプリコットデザインのざっきーです。今回はWEB制作をしていると避けては通れないフォントについて取り上げたいと思います。
WEBサイトを通じてブランドイメージを伝えたり、重要なメッセージをユーザーに分かりやすく伝えるために普段とは違うフォントを使って引き立たせたいことってありますよね！
見栄えもよく印象に残りやすいということで、WEB制作の現場ではWEBフォントが使用される頻度も増えつつあります。
しかし、WEBフォントという言葉が出てきて数年経ちますが、Googleフォントでも今だに日本語の明朝体はサポートされておらず何時になるのだろうかと待ち遠しく思ってしまったりもします。
じゃあ「今綺麗な明朝体を表示するのにはどうしたらいいんだ！」ということでフォントの変換について調べてみました。
これというのも実は2～3年ほど前まではとあるフォント変換サイトが稼働していたこともあり、今よりは実装の敷居が低かったという背景もあります。
当時、様々なフォントを変換して必要なデータを所持されている方々はもちろんそのまま使いづづけていただければ大丈夫です。
でも、もし足りないフォントがあるのであればぜひこの機会にWEBフォント化してみましょう。
フォントの変換について
使用するもの（3点）- TrueTypeかOpenTypeのフォントファイル
- WOFFコンバータ（フリーソフト）
- font-converter(otfからttfへの変換に使用)
主要ブラウザのchromeとfirefoxではWOFF形式、IEではeot形式、android・ios用ではttf形式もしくはotf形式のファイルが必要となります。
さて実際に手元のフリーフォントの拡張子を見てみるとotf形式かttf形式のどちらかでしょう。
このままではPC用ブラウザではフォントファイルを認識させることができないのでファイル変換が必要となります。
この時手元にあるフォントファイルがOpenTypeの場合は注意が必要です。
当然OpenTypeからでも全てに対応させることは可能ですが手順に注意してください。
というのも、OpenTypeからは直接eotへの変換ができないという問題があるんです。
このような場合は先にOpenTypeからTrueTypeへの変換をしてあげる必要があります。
この時使用するツールはfont-converterです。上記URLから変換を行ってください。
アップロードボタンが数字に文字化けしていますが動作確認済みです。
無事変換がすんだら変換したファイルをダウンロードしておきましょう。
ダウンロードしたフォルダにはWOFF、WOFF2、TrueTypeの3種類が格納されています。
次にTrueTypeファイルをWOFFコンバータ（フリーソフト）を使用してeotに変換します。
これでひとまずはOpenType・TrueType・WOFF・WOFF2の4種類が手元にある状態になると思います。
（注記：WOFF2はWOFFの新しい形式で特定ブラウザの新しいバージョンに対応しているファイルです。）
あとは以下の記述をCSSに入力してください。
@font-face {
font-family: "任意でフォント名を付ける";
src: url("../font/ファイル名.eot") format('embedded-opentype'),
url("../font/ファイル名.woff2") format('woff2'),
url("../font/ファイル名.woff") format('woff'),
url("../font/ファイル名.ttf") format('truetype');
｝
これでブラウザ上でもフリーフォントがWEBフォントとして反映されます。
一度変換さえしてしまえば色々なところで使えるのでお試しください。
