Subscribe Twitter

2012年2月19日日曜日

このエントリーをはてなブックマークに追加

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


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

Google web fontsは、webページで使うだけでなく、ダウンロードしてローカルで使うことも可能。その(1)の繰り返しになるが、「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ページで利用する場合は、その(1)でも触れたように、確かにダウンロードする必要はない。しかし、今回は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.ttfChango-Regular.ttfDroidSans.ttf(含むBold)、EmblemaOne-Regular.ttfEuphoriaScript-Regular.ttfMacondo-Regular.ttfMonoton-Regular.ttfNorican-Regular.ttfPiedra-Regular.ttfTitanOne-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」に変換、インストールできた。





Related Post:


0 コメント: