Webサイトの雰囲気をグッと上質にしてくれる「Adobe Fonts（旧Typekit）」の有料ウェブフォント。ここでは、基本の使い方から、経験上からWordPressやテンプレートで反映されないときの対処法までご紹介します。
1. Adobe Fontsにアクセス
まずは以下のURLからAdobe Fontsにアクセスします。
※有料フォントはAdobe Fontsとの契約が必要となります。
👉 https://fonts.adobe.com/fonts/
2. 好きなフォントを選ぶ
日本語対応のフォントを探したい場合は、検索ボックスで「Japanese」と入力したり、言語フィルターを活用すると便利です。
3. 「Webプロジェクトに追加」をクリック
使いたいフォントが見つかったら、そのフォントファミリーのページで「Webプロジェクトに追加」ボタンをクリックします。
4. プロジェクト名を入力して作成
「新しいプロジェクトを作成」にチェックを入れ、任意の名前（例：「自分のサイト名」など）を入力し、作成ボタンを押します。
5. <head>にコードを貼り付ける
プロジェクトを作成すると、JavaScriptのコードが表示されます。このコードを、サイトの<head>内に貼り付けてください。
6. CSSでフォントを指定する ← これが大事！
スクリプトを読み込んだだけではフォントは反映されません。必ずCSSでどの要素に適用するかを指定する必要があります。
例：全体に適用したい場合
body {
font-family: "fot-tsukuardgothic-std", sans-serif;
}
例：見出しだけに適用したい場合
h2, h3, .headline {
font-family: "fot-tsukuardgothic-std", sans-serif;
font-weight: 700;
}7. 反映されないときの対処法
テンプレートなどでデフォルトCSSが強く効いている場合、フォント指定が無視されることがあります。
その場合はさらに個別での指定や強力な指定が必要となります。
その場合の対処法
h3 {
font-family: "fot-tsukuardgothic-std", sans-serif !important;
font-weight: 700 !important;
}
!important を付けることで、上書きできるようになります。
まとめ
| ステップ | 内容 |
|---|---|
| 1 | Adobe Fontsでフォントを選ぶ |
| 2 | Webプロジェクトに追加する |
| 3 | <head>にコードを貼る |
| 4 | CSSで適用する要素を指定する |
| 5 | 効かないときは !important を試す |
飯田市でホームページ制作・広告運用をサポート｜デザインスタジオiR
牧内理恵
まきうちりえ
飯田市在住、広告制作歴20年以上。これまで200名以上のクライアント様と向き合い、100件以上のサイト制作を手掛けてきたデザイナー兼エンジニアの牧内理恵です。御社の強みを引き出し、業績アップに繋がるWebサイト・ネットショップ・販促ツールをご提案します。拠点とする長野県内はもちろん、全国各地からのご依頼にも柔軟に対応しております。
「相談してよかった」と言っていただける、飯田下伊那地域のパートナーとして。
長野県飯田市を拠点に、ホームページ制作やECサイト構築、Web運用のトラブル解決を承っています。20年以上のキャリアで培った「伝わるデザイン」と「確かな技術」で、御社の業績アップを支えます。飯田・下伊那エリアはもちろん、全国からのオンライン相談も大歓迎です。
「ホームページを作りたい」「ホームページをリニューアルしたい」といったご依頼もお気軽にお声がけください。
※強引な勧誘は一切ありませんので、安心してお悩みをお聞かせください。
