sk51.log

The Averageman's web log.

リュウミンや新丸ゴなどのモリサワフォントがCreative Cloudで使えるようになっていた


2015年11月24日 Web制作

Web制作で日本語フォントを扱う際、WindowsとMac間でどうするかに悩まされることがあります。
最近になって、游ゴシック体がWindowsで使用できるようになりましたが、それもWindows8.1からのことです。
Macにも游ゴシック体がOS X 10.9から搭載されましたので、ウェイトが多少違うことはありますが、標準搭載では初の共通フォントとなるのではないでしょうか。
ただ、それ以前のOSには搭載されていないので、Web制作で使うには日本語フォントはまだまだ選択の幅が少ないのが現状です。

しかし、最近になってAdobe Creative CloudのTypekitにモリサワフォントが追加されました。
つまり、Creative Cloudを使用していれば、PhotoshopでもIllustratorでも、さらにはWebフォントとしても使用することができるようになりました。

1. Typekitでモリサワフォントを使う

使用方法は簡単で、各Adobe製品からフォント選択パネルにある「Typekitからフォントを追加」を選択して、好きなフォントを入れればすぐに使用できます。

TypeKitで使用できるフォントは以下の20フォントです。

  • 提供書体 (*はタイプバンク書体)

    • リュウミン L-KL

    • 太ミンA101

    • 見出ミンMA31

    • 中ゴシックBBB

    • 太ゴB101

    • 見出ゴMB31

    • じゅん101

    • TB シネマ丸ゴシック *

    • TB ちび丸ゴシックPlusK R *

    • 篠-M *

    • 日活正楷書体 *

    • ぶらっしゅ *

    • サン-M *

    • TB カリグラゴシック E *

    • 漢字タイポス415 R *

    • UD 新ゴ L

    • UD 黎ミン L

    • UD 新丸ゴ L

    • TB 新聞明朝 L *

    • TB 新聞ゴシック M *

モリサワ モリサワグループ書体をAdobe Creative CloudのTypekitに提供開始
モリサワおよびタイプバンクの20書体 | ニュース&プレスリリース | 企業情報 | 株式会社モリサワ

2. Webフォントとして利用

Webフォントとして使うには少し設定が必要になりますが、いたって簡単です。

2.1. フォントを探す

morisawa-is-available-in-creative-cloud-01

2.2. 詳細を確認し、「+フォントを使用」をクリック

morisawa-is-available-in-creative-cloud-02

2.3. 「Webタブ」をクリックし、「新しいキットを作成します」をクリック

morisawa-is-available-in-creative-cloud-03

2.4. 使用するサイト名とドメインを入力

morisawa-is-available-in-creative-cloud-05

2.5. JavaScriptコードを</body>の直前に挿入

morisawa-is-available-in-creative-cloud-06

2.6. 右下の「公開」ボタンをクリック

morisawa-is-available-in-creative-cloud-07

2.7. CSSを設定

morisawa-is-available-in-creative-cloud-08

Googleフォントに比べると若干作業がありますが、特に難しいことはなく簡単に設定できます。
Webフォントを使用することでOSを気にすることがなくなるので、美しいモリサワフォントはお勧めです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

*

CAPTCHA