サイトの文字を自分の好きなフォントにしたいと思いませんか?

Adobe Cloud を使うと、簡単にフォントを Web サイトに追加できます。

Mieしたいけど外部フォントを入れると重くなるんじゃない?

Adobe Typekit を使うと Cloud 内でやりとりするので自分のサイトにフォントを読み込む方法より軽い容量でできます。

Mieちょうど、吹き出しコメントを手書き風にしたかったんだ♪ 教えて!

まず、Typekit サブスクリプションをまだお持ちでない場合は、いずれかのプランに新規登録してアカウントを作成してください。

  1. フォントのサイトを開きます。
  2. ページ上部の切り替えボタンで、デフォル日本語 フォントのコレクションを選びます。
  3. Mie緑色のボタンね!

  4. フォントを選び、ダブルクリックすると、フォントの詳細 ページに飛びます。
    気に入ればページ右上の
     
    <>WEBで使用:キットに追加 をクリック。

  5. キットに追加 ページに飛びます。
    先ほど選んだフォント名が出ているので、
     
    キットを作成 をクリック。

    Mie一度作成して追加したい時は、既存のキットに追加 から選択するのね♪

  6. 新しいポップ キットを作成 が開きます。
    キットにわかりやすい名前 と、適用するドメイン (例 : example.com、www.example.com、staging.example.com) を入力します。

    Mie名前は何でも構わないだね。
    ドメインは 10 個まで追加できて、https://とかつけなくていいんだ!

  7. さらに新しいポップが開きます。
     

    • セレクター
      例:tegaki 
       ※HTMLタグ(h2,p) , class または id を入力します。
    • 文字セット は指定されたままでOK。
      ※縦書きでない場合はチェックを外します。
    • 太さとスタイル を選択します。
      ※必要なだけを選択しないとサイズが大きくなります。
    • CSSスタック は自動で入っているので、そのままでOK。
  8. デフォルトの埋め込みコード をコピーする。
     
  9. コピーした埋め込みコードを footer.php に追記します。
     

    Mieアップグレード時に大変だから、子テーマ に作った方がいいんだよね♪

  10.  

    Mie埋め込みコードの追加場所はキットエディターが示してくれるんだね!
    ダイナミックキットでは、</body> 閉じタグの前 に入力したけど、他のキットでは <head> タグ内 に配置することもあるんだ~♪

  11. 自分のサイトの投稿ページにセレクタ(例:tegaki)を入力します。
     
    例:

    <p class= “tegaki” >(これはテストだよ♪)</p>
  12. style.css を子テーマに作り(作成済みであれば、そこに追記)、CSSコードを記入します。
     
    例:

    .tegaki {
    font-family: “ro-san-std”,sans-serif;
    }

    ※”ro-san-std”:選択したフォント, sans-serif:代替フォント

Mie無料のプランだとWebフォントで使用できる日本語は4つしかなく、ポートフォリオプランでも手書きに近い文字はこの“ro-san-std”のみなんだ~。
他のやり方もまた教えてね♪