Typekit「モリサワ リュウミン」の日本語Webフォントの設定方法


web-font-morisawa-ryumin

多くのデザイナー、クリエイターが利用しているAdobe Creative Cloudのサービス。「コンプリートプラン」を利用している方でしたら、追加料金なしで利用できるのがWebフォントサービスの「Typekit」。こちらにプロユースのフォントを開発、提供している「モリサワ」の日本語Webフォントがあります。

モリサワは2017年6月現在、「Adobe Typekit」に、下記の20書体を提供しているので、Adobe Creative Cloud「コンプリートプラン」の会員の方はWebフォントサービスを利用できます。

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

リュウミン 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 *

今回、Job Stageではそのサービスを利用し、印刷物、Webサイトで目にしない日はないスタンダードな明朝体「リュウミン」を利用しオリジナル書体見本帳を作成しました。

その手順と書体見本帳のリンクを紹介させて頂きます。とても簡単ですので現在Webデザイン・コーディングをお仕事としている方、また勉強している学生さんは是非、参考にしてみてください。

1. リュウミンを検索

adobe_typekit_ryumin_kensaku

最初に、Adobe Typekitサイトにアクセスして、検索窓から「リュウミン」を検索します。現在はリュウミンは「A-OTF Ryumin Pr6N L-KL」という細いウェイトのみ提供されています。(※2017年6月15日現在)

2. キットを作成し追加する

Adobe Typekit独自の設定ですが、「キット」を作成します。その際必要な情報はWebフォントを利用したい「ドメイン名」。キット名を設定し、ドメインを入力するだけで、2行のタグが発行されます。こちらをhead内にコピー&ペーストし、HTMLを修正します。

3. CSSを設定

下記の設定を、利用したいIDやセレクタに対して、CSSで設定します。コーディングの基本を理解していればとても簡単な設定です。

Job Stageオリジナル書体見本帳

LINK|リュウミンのJob Stageオリジナル書体見本帳はこちらから

Typekitとは

Adobeが提供しているサービス。Typekit は数多くのフォントを一つの ライブラリーで提供するサービスです。Typekitを使えば、フォントをすばやく 参照して、 簡単に Web や デスクトップ アプリケーションでいますぐ使用でき ます。現在、多くのWebデザイナーが利用しているWebフォントサービスの一つです。Creative Cloud会員は追加料金無しで利用できる便利なWebフォントサービスです。
公式URL|https://typekit.com/?locale=ja-JP


公開日:2017/06/15