Home » Mac » ◉ Google web fontsの使い方（html作成初心者に解説したまとめ）
・その（3）「Google web fontsのフォントをMacOS Xにインストール」

◉ Google web fontsの使い方（html作成初心者に解説したまとめ）
・その（3）「Google web fontsのフォントをMacOS Xにインストール」

2012年2月19日日曜日

API font Mac


◎ Google web fontsのフォントをMacOS Xにインストールしてみた
（インストールするMacOS Xは、10.4〜10.7）

Google web fontsは、webページで使うだけでなく、ダウンロードしてローカルで使うことも可能。その（１）の繰り返しになるが、「Google Web Fonts」で公開されているフォントはすべてオープンソースとなっていて、商用でも非商用でも無償で利用できる。

● フォントのダウンロード
「Google web fonts」のページで、フォントを選び（ひとつでも複数でもかまわない）、下のブルーのエリアのCollectionにフォントファミリー名が表示されていることを確認して、


画面右上に表示される「Download your Collection」をクリック。


別窓が開いて、「You do not need to download the font to use it on your webpages. Instead, refer to the "Use" section.」（webページ上で使用する場合は、フォントをダウンロードする必要はありません。代わりに、"Use"を参照してください）とワーニングが出る。

webページで利用する場合は、その（１）でも触れたように、確かにダウンロードする必要はない。しかし、今回はwebページで利用するのではなく、Macにインストールするためなので、ワーニング文の下の「Download the font families in your Collection as a zip -file」をクリックする。「fonts.zip」の名称でzip圧縮形式のファイルがダウンロードされる。


Safari（MacOS X 10.4）を使った場合、ダウンロードしたzipファイルが自動で解凍されて、「fonts」という名称のフォルダができる。もし自動で解凍されなければ、zipファイルをダブルクリックして解凍させる。

なお、サンプル画像は、MacOS X 10.4のものなので、フォルダアイコンが古い。
左側の「fonts」フォルダを開くと、右側のように各フォントのフォルダがまとめて入っている。


ダウンロードしたGoogle Web Fontは、ttf形式。
通常Macでフォントをインストールする場合、フォントファイルをダブルクリックで、Font Book.appが開き、表示される「フォントをインストール」ボタンをクリックして完了する。
今回、「Macにインストール」を試したGoogle web fontsのフォントは以下の11フォントファミリー。
Asap-Regular.ttf（含むBold、BoldItalic、-Italic）、BadScript-Regular.ttf、Chango-Regular.ttf、DroidSans.ttf（含むBold）、EmblemaOne-Regular.ttf、EuphoriaScript-Regular.ttf、Macondo-Regular.ttf、Monoton-Regular.ttf、Norican-Regular.ttf、Piedra-Regular.ttf、TitanOne-Regular.ttf。

● MacOS X 10.7
ttf形式のままダブルクリックして、Font Book.appが起動し、「インストール」ボタンをクリック、11フォントファミリーともインストールできた。ただ「EmblemaOne-Regular.ttf」のみ、「1個の小さな問題が見つかりました。注意して続けてください」とのワーニングが出た（インストールはできた）。
● MacOS X 10.6
MacOS X 10.7と同様にして、11フォントファミリーすべて問題なくインストールできた。
● MacOS X 10.5
こちらもMacOS X 10.7と同様にして、11フォントファミリーすべて問題なくインストールできた。
改めて画像を比較してみると、MacOS X 10.6のFont Book.appと、MacOS X 10.5のそれは、見た目でほとんど変わらないことがわかる。
● MacOS X 10.4の場合はやや面倒
ttfファイルをダブルクリック、Font Book.appが起動、「インストール」ボタンクリック（下画像左側）で問題が発生した（下画像の右側）。「重大な問題が見つかりました。このフォントは使用しないでください」という表示になる。すべてのGoogle Web Fontで問題が発生するか未確認だが、このときダウンロードした11のttfはすべて駄目だった。


ttfとは
拡張子の「.ttf」は、TrueType（トゥルータイプ）形式のフォントファイル。TrueTypeのもう一つの拡張子「.ttc」（True Type Collection）は一つのファイルにプロポーショナルと等幅など類似した複数のttfフォントを入っているもので、MacOS Xの古いバージョン（たしか10.6未満）では扱えない。

ttf形式なら古いMac OSXでも利用できるはず（認識が間違っているかも）だが、Windows用のものは、MacOS X用のTrueTypeと内部の構造が違う場合があるし、最近は、OpenType（オープンタイプ）の一部形式も「.ttf」になっていることがあるのでややこしい。

OpenTypeでもPostScriptフォント形式（拡張子「.otf」）ならば、ベジェ曲線で表現される形式なので、MacOS Xで問題なく利用できる（はず）、そこで、このttfをotfに変換してみた。


webサービスでttf→otf変換
「ttf→otf変換」で検索するといろいろヒットすると思うが、今回はこちらのサイトを利用させていただいた。
http://www.henkan-muryo.com/converted.php
  1. メニューの右側にある「フォント」をクリック。
  2. 「入力先（変換したいファイル）」をクリック。
  3. ローカルにあるttfファイルを選ぶ。
  4. アップしたフォント名、サイズが表示される。
  5. 「出力先」のセレクトボックスのプルダウンで「otf - OpenType font」を選択
  6. [変換する]ボタンをクリック。
  7. 少しして、変換が終わり「完了したファイルはこちらから」と書かれた下に変換されたotfのリンクが表示される
  8. MacOS X 10.4の場合は、このリンクをoption + クリック（ただクリックすると、ブラウザに文字列として表示されてしまう。それでも保存はできるがあまり気分はよろしくないので）。
  9. フォントファイルがダウンロードされる。拡張子「.txt」が付いているのでこれを取る変更の確認のダイアログが出るので、「".otf"を使用」ボタンをクリック。
  10. 「.otf」として認識される。
  11. otfをダブルクリックしてインストール。
ちなみに、画像サンプル用に使った「Monoton-Regular.ttf」は、変換過程でもエラーが出た。それ以外の10フォントファミリーは上の手順で無事に「.otf」に変換、インストールできた。





By 時刻:
ラベル: , ,