Typekit「モリサワ リュウミン」の日本語Webフォントの設定方法
多くのデザイナー、クリエイターが利用している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ではAdobeのWebフォントサービスを利用し、印刷物、Webサイトで目にしない日はないスタンダードな明朝体「リュウミン」のオリジナル書体見本帳を作成しました。
その手順と書体見本帳のリンクを紹介させて頂きます。とても簡単ですので現在Webデザイン・コーディングをお仕事としている方、また勉強している学生さんは是非、参考にしてみてください。
1. リュウミンを検索
最初に、Adobe Typekitサイトにアクセスして、検索窓から「リュウミン」を検索します。現在はリュウミンは「A-OTF Ryumin Pr6N L-KL」という細いウェイトのみ提供されています。（※2017年6月15日現在）
2. キットを作成し追加する
Adobe Typekit独自の設定ですが、「キット」を作成します。その際必要な情報はWebフォントを利用したい「ドメイン名」。キット名を設定し、ドメインを入力するだけで、2行のタグが発行されます。こちらをhead内にコピー＆ペーストし、HTMLを修正します。
3. CSSを設定
下記の設定を、利用したいIDやセレクタに対して、CSSで設定します。コーディングの基本を理解していればとても簡単な設定です。
font-family: a-otf-ryumin-pr6n, serif;
font-style: normal;
font-weight: 300;
- Job Stageオリジナル書体見本帳
- LINK｜リュウミンのJob Stageオリジナル書体見本帳はこちらから
Typekitとは
Adobeが提供しているサービス。Typekit は数多くのフォントを一つの ライブラリーで提供するサービスです。Typekitを使えば、フォントをすばやく 参照して、 簡単に Web や デスクトップ アプリケーションでいますぐ使用でき ます。現在、多くのWebデザイナーが利用しているWebフォントサービスの一つです。Creative Cloud会員は追加料金無しで利用できる便利なWebフォントサービスです。
公式URL｜https://typekit.com/?locale=ja-JP
最終更新日：
