ホームkeyboard_double_arrow_rightナレッジブログkeyboard_double_arrow_rightこのフォントどうやって使うの?ダウンロードしていいの?【正しいフォントの使い方】

このフォントどうやって使うの?ダウンロードしていいの?【正しいフォントの使い方】

きなこ
  • デザイン
  • デザイナー
  • デザイン
  • Webデザイン
公開: 2020.12.07 更新: 2022.01.17

おっ久しぶりです。
デザイナーのきなこです。
 
みなさんフォントをダウンロードしたことありますか?
PCに元から入っているフォントだけでなく新しくフォントを入れる機会って結構あるかと思います。
 
フォントをダウンロードする際、様々な種類がありどれをダウンロードしたらいいのか、悩んだことがありませんか?
 
なんなんだこの形式は?
フリーフォントと書いてあるけど、ほんとに使っていいの?
オープンタイプってなんだ?
、、、ええい、とりあえずダウンロードだーーー!
なんてことがないように、
本日はフォントの種類や選び方についての基礎知識を書こうと思います。
 
データの形式などの話になりますので、
フォントの歴史や選び方については弊社さとおの
「日本語フォントの役割と分類を知って、適切なフォント選びをしよう!」
にとっても分かりやすくまとめてありますのでご覧いただければと思います!! 

拡張子の種類について

フォントのデータを見ると様々な拡張子があると思います。
これらは何が違うのでしょうか、よく使われるものを簡単にご説明いたします。
.otf
一般的にPCにインストールして使用するフォントファイル
 
.ttf
otfと同様一般的にPCにインストールして使用するフォントファイル
 
.woff
TrueType(ttf)やOpenType(otf)の圧縮版。ファイルサイズが軽く読み込み時間が早い
 
.woff2
「woff」の進化版。woffと比べて圧縮率が高い

OpenTypeとTrueType

フォントを見る際に「OpenType」「TrueType」ってよく聞きませんか?
またフォントを選ぶとき、『O』や『T』というマークがついているのをみたことがあると思います。
こちらは拡張子の話ではなく「形式」のことを指します。(うぅぅ、分かりにくい、、、)
拡張子は同じでも、フォントの形式が違う、ということがあります。
フォント形式による違いをご説明いたします。
 

OpenType

OpenType(読み:オープンタイプ)
 
アドビシステムズとマイクロソフトが共同開発したフォントファイル形式です。
  
特徴
・MacとWindowsの両方で利用できる
・文字数の違うStd仕様とPro仕様とがある
・文字セットが多い
・比較的高価格
・制御や字詰めが柔軟にでき
  
OpenTypeフォントのうち、TrueTypeフォントの形式を継承したOpenTypeフォントの拡張子は「.ttf」「.ttc」
Postscriptフォント形式を継承したOpenTypeフォントの拡張子は「.otf」となります。

TrueType

TrueType(読み:トゥルータイプ)
 
アップルとマイクロソフトが共同開発したフォントファイル形式です。
  
特徴
・Macとwindowsそれぞれにインストールできるが互換性がない
比較的安価
・使用環境を気にする必要がない
・最高解像度が600dpiしかない
  
フリー(無料)フォントの多くはTrueTypeです。
歴史が長く、広く普及済みのフォント形式になります。

どっちがいいの?

で、結局どっちがいいのかな?

特徴を見て分かる通り、
解像度の関係で荒くなってしまったり(大きい文字を印刷する場合)、
特殊な文字が表現できなかったりすることがあるため、

デザイン業界(DTP業界)では高性能なOpenTypeフォントを使う事が多いです。
(文字詰めが柔軟にでき、綺麗さ、読みやすさを求めるDTPでは大活躍♪)
しかしWindowsの一般向けソフトはOpenTypeに対応してない事が多いので注意しなければなりません。
Windowsを使っており、フォントを使う目的がプレゼン資料の作成や年賀状の作成などの場合は、
TrueTypeフォントを使用する方がいいと思います。
しかしWindowsとMac間での互換性がないため、両方のパソコンで使用する場合は
それぞれWindows用、Mac用フォントを準備する必要があります。
それぞれメリットデメリットをきちんと理解し、
作業環境や目的に合わせて、ダウンロードするフォントを選んでみてくださいね!

Webフォントについて

さてさてWebフォントって一体なんだ?
ずばり、Webページ上のテキストを好きなフォントで表現できるステキな仕組みのことです。
デザイン性とSEOの効果を両立できる!すげー!
 
Webページのテキストを表現する時に、今まではユーザ側を考慮した限られたフォントしか使えなかったのですが、
Webフォントが登場し、フォントファイルさえあれば、どんなフォントでも使用できるようになりました!
Webフォントには、TrueTypeフォントやOpenTypeフォントも使えるのですが、
Web専用のフォント形式を使う方が、メリットがたくさんあります。
・ストレージの節約
・読み込み時間の短縮
・第三者による二次利用を防ぐ など
 
オススメWebフォント
Google Fonts
Googleが提供するWebフォントのサービスです。
無料で使用可能!

フリーフォントについて

フリーフォントを使うことは多いかと思います。
フリーフォントは「無料」で使えるフォントを指します。
しかし無料だからといって自っ由〜に使えるというわけではありません!
下記の内容に注意しましょう!

商用利用なのか個人利用なのか

商用利用とは営利目的で利用することです。 
企業サイトでの利用する場合や成果物の作成を目的とした場合などを指します。
 
個人利用とは商用利用とは逆の、営利を目的とせずに個人で使うことを言います。
フリーフォントを使った作品を個人のサイト・ブログで紹介する場合
フリーフォントを使った作品の売買取引をしない場合など

「商用利用可」でも注意

「商用利用可」でも注意しなければならないことがあります。
 
・フォントの変形・加工をしてはいけない
フォントの形をそのままに、ロゴやグラフィックを作成するのは構わないが、
既存のフォントを加工してはいけないという意味です。
 
・クレジットに示さなくてはならない
著作権表示をすることによってそのフォントの作者を分かるようにしなければいけないという意味です。
 
フリーフォントといっても作成者がいます。
作成者を尊重し、使用許諾や利用規約をきちんと読むことが大切です!

フォントのインストール方法

当然の如くご存知の方ばかりかと思いますが
こちらに簡単にダウンロードしたフォントの使い方をまとめておきます。

Windows

①フォントファイル(拡張子.ttf, otfのファイル)をダブルクリック。
②Windows フォント ビューアーでフォントが開く。
③「インストール」をクリックすると、フォントがインストールされる。

Mac

①フォントファイル(拡張子.ttf, otfのファイル)をダブルクリック。
②Font Bookでフォントが開く。
③「フォントをインストール」をクリックすると、フォントがインストールされる。
いやいやほんとに簡単だな。

最後に

普段当たり前に使っているフォント。
なんとなーくダウンロードしてなんとなーくインストールすれば使えてしまいます。
しかし、しっかりと理解して正しい使い方をしていきたいですね。
今回いろいろ調べてみてモヤモヤしていた部分も少し解消されました。
 
読んでいただきありがとうございました!
以上フォント作りをそろそろやってみたいきなこでした〜!
制作の流れについて
  • 制作の流れ
  • 制作フェーズ
  • 運⽤フェーズ
  • お問い合わせ
  • 会社概要
GrowGroupの会社概要をはじめ、
成功事例などをご紹介しています。
  • 会社概要
  • 制作実績
  • 事業コンセプト
  • 会社概要
見積もりを依頼する見積もりを依頼する
顧客の課題解決を行い、成果を上げたGrowGroupの成功事例
GrowGroupは、ただただ制作するだけではありません。ご依頼の背景、⽬的からWebサイトの⽅向性を⾒極め「⽬的の達成」を第⼀に制作しています。

著者情報
デザイナー
きなこ

growgroup デザイナーのきなこです。

きどらず、なまけず、こつこつと
ブログを書いていきたいと思います。
よろしくお願いいたします!!!


弊社エンジニアが執筆したWordPress標準デザイン講座が出版されています弊社エンジニアが執筆したWordPress標準デザイン講座が出版されています
メルマガ登録に登録するメルマガ登録に登録する