Adobe Fontsの使い方【日本語フォントも充実】

みーちゃん
Webページに色々な日本語フォントを使いたい!

 

そんな疑問に答える本記事です。

 

こんにちは。いちかわともや(@tomochan8282)です。

 

本記事ではAdobe Fonts(旧名 Adobe Typekit)の使い方を解説していきます。

 

Adobe Fontsの使い方【日本語フォントも充実】

Adobe Fontsとは?

Adobe Fontsは、Adobe社が提供しているWebフォントです。Adobe IDがあれば無料で利用可能で、数百社のフォントベンダーが提供する数千のフォントを使用することができます。

 

Google Fontsよりも日本語フォントが充実しており、Webページの表現に幅を持たせることができます。

 

 

僕のWebサイト(トモーヤドットコム)にもAdobe Fontsを利用しています。「漢字タイポス」というフォントですね。

 

フォントを選択

 

Adobe Fontsのページへ行き、「開始」をクリックします。

 

 

フォント一覧が表示されます。今回は、日本語フォントを使用したいので「日本語モード」をクリックします。

 

 

「Ro ぶらっしゅ Std」というフォントを使います。「アクティベート」をONにします。

 

 

これで、「Ro ぶらっしゅ Std」が使えるようになりました。「OK」をクリックします。

 

Photoshopで確認

 

Adobe社の製品である、Photoshopやillustratorでも使用できるようになっています。確認してみましょう。

 

▼Photoshopを使ったアイキャッチ画像の作りかたはコチラ

 

Webページで使用する設定

 

次に、Webページで使用するための設定をします。

 

フォント一覧の画面に戻り、「Ro ぶらっしゅ Std」をクリックします。

 

 

「Webプロジェクトに追加」をクリックします。

 

 

「Ro Brush Std」をコピぺし、「作成」を押します。

 

 

表示されたコードを、HTMLの<head>とCSSに追加します。

 

 

このような感じで追加します。Webページを見てみましょう。

 

反映されました!

 

いかがでしたでしょうか?

 

いろいろなフォントを試しながら、Webサイトの雰囲気を変えてみてくださいね!

 

Twitterでも、エンジニア向けの技術情報やブログ運営の方法など、役に立つ情報をわかりやすく発信していますので、よろしければフォローをお願いいたします↓↓

イチカワトモヤ@ホテルマンエンジニア(Twitter: @tomochan8282

コメントを残す

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

CAPTCHA