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

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

 

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

 

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

 

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

 

Adobe Fontsとは?

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

 

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

 

 

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

 

それでは解説していきたいと思います!

未経験から
稼げるエンジニアになる
正しい方法

侍エンジニア塾なら、わずか6ヶ月で稼げるエンジニアを目指せます。IT業界が人手不足の今、思い切ってエンジニアになってみませんか?

 

◆もくじ

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

  1. Adobe Fontsとは?
  2. フォントを選択
  3. Photoshopで確認
  4. 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サイトの雰囲気を変えてみてくださいね!

未経験から
稼げるエンジニアになる
正しい方法

侍エンジニア塾なら、わずか6ヶ月で稼げるエンジニアを目指せます。IT業界が人手不足の今、思い切ってエンジニアになってみませんか?

コメントを残す

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

CAPTCHA