パソコンを使ってプレゼン資料や名刺を作ったり、年賀状を作る時なんかに、「使える書体のバリエーションを増やしたいな~」と思って、無料や市販のフォントをインストールする機会があると思います。
そんな時、フォントの拡張子(ttf 、otf、ttc、eotなど)について、疑問に思ったことはありませんか?
- フォントにいろんな拡張子があるのは、なぜ?
- TrueTypeとOpenTypeの違いって?
- どの拡張子のものをインストールすればいいの?
という疑問について調べてみました!
フォントの拡張子って何があるの?
現在、広く普及しているフォント拡張子は以下のとおりです。
- .ttf
- .otf
- .ttc
- .otc
- .dfont
- .eot
- .woff
- .woff2
「.ttf」と「.otf」の2つの拡張子は、私たちがよくパソコンで利用しているものになります。
他にも「.eot」や「.woff」など、インターネットが普及するようになって、新しく出てきたフォントもあります。
いろいろあるけど、どう違うの?選ぶポイントは?
ここまでいろんな拡張子があるのは、次のような背景があります。
- 文字をデジタルでどう表現するか?という表現方式による違い
- フォント制作会社の違い
- 機能向上(バージョンアップ)による違い
- 使用用途や対応OS、対応ブラウザによる違い
この記事は初心者向けのため、深堀りしての説明は控えますが、もっと深く知りたい方は、記事の最後の参考サイトをご覧ください!
さてさて、それぞれの拡張子の違いを見ていきたいところですが、調べたところ、拡張子は同じでも、フォント形式は異なる、というものがありまして…
要は、見た目で判断するな!ということです。拡張子ではなく、フォント形式による違いを見ていきましょう!
True Type フォント
拡張子
- .ttf
特徴
- MicrosoftとAppleが共同で開発した形式
- 歴史が古く、広く普及しているフォント形式で、対応環境も多い
- 安価
- 収録可能な字体数がOpenTypeより少ない
- 無料のフォントに多く使われている
選ぶポイント
- 初心者~上級者までの幅広いユーザー向け
- Office等のMicrosoft製品をよく使う人に特にオススメ
※Office製品の「ワードアート」機能や、一部のWindows用ソフトウェアでは、OpenTypeに対応していなかったり、うまく表示されない場合があるため - 古いアプリケーションを使っている場合は、OpenTypeに未対応の場合があるためこちらの形式を選ぶと良い
- Windows-Mac間での互換性はないので、インストール時はそれぞれに対応したものを選ぶこと!
Open Type フォント
拡張子
- .ttf
- .otf
特徴
- AdobeとMicrosoftが主体で共同開発した形式
- TrueTypeフォントとPostScriptフォントの技術を統合して作られた新しいフォント形式
- PostScriptフォントベースの形式は、拡張子が「.otf」で、
TrueTypeフォントベースの形式は、拡張子が「.ttf」もしくは「.otf」
※「.ttf」の場合、TrueTypeかOpenTypeかの区別が付かない… - TrueTypeに比べて、多数の高度な機能をもつ
(膨大な収録字体数、合字機能、異体字の制御、柔軟な文字詰め) - その分高価なフォントが多い
- Windows-Mac間での互換性があるため、相互にデータをやりとりする際に文字化けする心配が少ない
選ぶポイント
- OpenTypeの持つ高機能に対応しているAdobe製品(illustratorやPhotoshop、inDesignなど)をよく使うデザイン業や出版業などのプロユーザー向け
- Windows-Mac間での互換性を求める人向け
インストールしたフォントが格納されたフォルダに、ttfとoftの2種類の拡張子ファイルがあったら、ttf=TrueType、otf=OpenType、と判断して良いでしょう。どっちもOpenTypeなんてことは無いでしょうからね。笑
その他にも、TrueTypeフォントとOpenTypeフォントを比較すると、アルファベット小文字の「p、j、p、q、y」など、下に延びている部分の長さがTrueTypeと比べて長くなっているフォントがあるという違いもあります。
参考 【フォントまめ知識】OpenTypeとTrueTypeの違いNISFont ブログ
TrueTypeフォントとOpenTypeフォントで、どちらを使おうか迷ったら、使うソフトウェアが対応しているフォント形式を確認するのがベストです。
- 「TrueType Collection」の略称。「フォントのコレクション」と呼んだりします。
- 複数のTrueTypeフォントを1つのファイルにまとめたもので、フォント形式とは別物。
- 字間が均等な等幅フォントや、字詰めされたプロポーショナルフォントなど、類似のフォントを1つのファイルにまとめて収録するのに使われます。
- 同じように、OpenTypeCollectionを表した「.otc」という仕組みもありますが、OpenTypeフォントをまとめたものも「.ttc」の拡張子を用いる場合もあります
OpenType-SVG フォント
拡張子
- .otf
特徴
- AdobeとMozillaが共同で開発している形式
- まだ限られたWebブラウザや最新のソフトウェアでしか対応していないが、現在フォント界のトレンドとなってるらしい
- OpenTypeフォントの字形をSVG(Scalable Vector Graphics)という画像形式で表現しているフォント形式
- 通常のフォントはベタ塗りの単色表現なのに対し、複数カラーや筆で書いたような濃淡、模様、グラデーションが表現できるため「カラーフォント」とも呼ばれる
- ブラウザ上でWebフォントとして使用することもできる
選ぶポイント
- 最新のAdobe製品(illustratorやPhotoshop,inDesignなど)を使用してテキストの表現の幅を広げたいデザイナー等のプロユーザー向け
- Webページ上のテキストの表現の幅を広げたい人におすすめ
▼ カラーフォントの例や各ブラウザの対応状況を確認したい方はこちらもどうぞ(英語)
参考 Color fonts! WTF?Color Fonts
Web専用のフォント形式もある!
Web専用のフォント「Webフォント」とは?
Webフォントとは、Webページ上のテキストを好きなフォントで表現できる仕組みのことです。
※好きなフォントと言えども、フォントのライセンスによってはWebフォントに利用すると違反になってしまう場合もあるので、確認が必要です💡
Webページ上のテキストを表現する際に、これまではユーザ側の閲覧環境を考慮した限られたフォントしか使えなかったのですが、ウェブフォントの仕組みが登場し、フォントファイルさえあれば、どんなフォントでも使用でき、表現の幅がぐっと広がりました。
Webフォントには、TrueTypeフォントやOpenTypeフォントも使える
(ただし、ブラウザによって対応しているフォント形式は異なります)
のですが、Web専用のフォント形式を使う方が、TrueTypeフォントやOpenTypeフォントを使うのと比べて、次のようなメリットがあります。
- ファイル容量が小さいため、ストレージの節約になる
- 読み込み時間を短縮できる
- 第三者によりダウンロードされデスクトップ上での二次利用(再配布)を防げる
Webフォントへ変換できるソフトウェアやWebサービスがあるので、簡単に導入できますよ!
ここまで長々と説明してきましたが…
Web専用のフォント形式として一般的な下記の3つを紹介します!
EOT(Embedded OpenType)
拡張子
- .eot
特徴
- Embeddedは「埋め込み」の意味
- OpenTypeと付くように、Web表示を目的としたOpenTypeのコンパクトな形式が必要だ!とMicrosoftが開発
- ブラウザはIEのみに対応している独自の規格
- 古いバージョン(Internet Explorer 4以下)は非対応なので注意!
- ただし、安定して使えるのはIE6以降なんだとか!
▼ 対応ブラウザは…
Can I use… Support tables for HTML5, CSS3, etc
WOFF(WOFF File Format 1.0)
拡張子
- .woff
特徴
- 「Web Open Font Format」の略
- eotに代わる新しいWebフォント形式で、Mozilla社が中心となって2009年に最初のバージョンが開発された
- 最新ブラウザの多くはWOFF形式に対応。ただし、Internet Explorer 6~8には非対応。
▼もっと 詳しくは…
WOFF (Web Open Font Format)|MDN
▼ 対応ブラウザは…
Can I use… Support tables for HTML5, CSS3, etc
※すみませんが、上記サイトでWOFFの検索結果が表示されなかった場合は、サイト上部の「Can I use _ ?」のところに「WOFF」と入力して検索してみてくださいm(_ _)m
WOFF 2.0(WOFF File Format 2.0)
拡張子
- .woff2
特徴
- WOFFのバージョンアップ版
- WOFFよりもフォントファイルの圧縮率が高いため、読み込み時間をより短縮できる
- 現在、各ブラウザへの対応が進められている
- 主要ブラウザの最新バージョンには対応済み(IEを除く)
▼ 対応ブラウザは…
Can I use… Support tables for HTML5, CSS3, etc
さいごに
フォントって奥が深いですね。。。
調べるのに苦労しましたが、今まで知ったかして覚えていた部分もあり、とても勉強になりました。
フォントについてより深く知りたい方は、分かりやすく解説している下記のサイトも覗いてみてください。
参考サイト
▼ 「フォントってそもそも…?」という方におすすめ!
▼ さらに詳しいTrueTypeフォント、OpenTypeフォントの解説やフォントの歴史などが分かります!
参考 FONT TIPSデザインのポータルサイトDEX WEB
▼ この記事では紹介しなかった「ビットマップフォント」や「スケーラブルフォント」の分類などが図で分かりやすく解説されています!
参考 TrueTypeフォント「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
▼ カラーフォントに該当するフォントの紹介や詳しい使い方についてはこちらが参考になります!
参考
ベテランほど知らずに損してるIllustratorの新常識(12)カラーフォントという新しい道具、そして絵文字Adobe Blog
この記事で使用した素材
- アイキャッチ画像:Photo by Alexander Andrews on Unsplash
- 挿絵:unDraw
※素材を使用する際は、素材配布サイトの利用規約をよく読み、ルールを守って使用してくださいね!
お探しの疑問は解決できましたか?
解決できた記事には、ぜひハート💖をクリックして応援いただけるとうれしいです!