Adobe有料ウェブフォントの使い方 WordPress対応 | 飯田市ホームページ制作デザインスタジオiR

Webサイトの雰囲気をグッと上質にしてくれる「Adobe Fonts（旧Typekit）」の有料ウェブフォント。ここでは、基本の使い方から、経験上からWordPressやテンプレートで反映されないときの対処法までご紹介します。

まずは以下のURLからAdobe Fontsにアクセスします。
※有料フォントはAdobe Fontsとの契約が必要となります。

日本語対応のフォントを探したい場合は、検索ボックスで「Japanese」と入力したり、言語フィルターを活用すると便利です。

使いたいフォントが見つかったら、そのフォントファミリーのページで「Webプロジェクトに追加」ボタンをクリックします。

「新しいプロジェクトを作成」にチェックを入れ、任意の名前（例：「自分のサイト名」など）を入力し、作成ボタンを押します。

プロジェクトを作成すると、JavaScriptのコードが表示されます。このコードを、サイトの<head>内に貼り付けてください。

スクリプトを読み込んだだけではフォントは反映されません。必ずCSSでどの要素に適用するかを指定する必要があります。

body {
  font-family: "fot-tsukuardgothic-std", sans-serif;
}

h2, h3, .headline {
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 700;
}

テンプレートなどでデフォルトCSSが強く効いている場合、フォント指定が無視されることがあります。
その場合はさらに個別での指定や強力な指定が必要となります。

h3 {
  font-family: "fot-tsukuardgothic-std", sans-serif !important;
  font-weight: 700 !important;
}

!important を付けることで、上書きできるようになります。