目次
Adobe Fontsからコードを取得
※Adobe Creative Cloudを契約している事が前提となります。
- Adobe IDにログインし、Typekit Web フォントを開いて、好きなフォントを探します。
- Webプロジェクトを作成するか、既存のプロジェクトにフォントを追加します。
- Webプロジェクトを保存してから、所定のコードをサイトに貼り付けます。
JSファイルとして別に保存
ここでコピーしたコードをコードをJSファイルとして使用します。テキストエディタに以下のようなコードを張り付け、adobe_fonts.jsとして保存します。
24.04.07追記:ここで何故か最初と最後のタグを除くように初稿当時書いていたようなのですが多分そのままでいいです。
<script>
(function(d) {
var config = {
kitId: 'ここにはあなたのIDが入ります',
scriptTimeout: 3000,
async: true
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
</script>保存したadobe_fonts.jsを、/wp-content/themes/<your-theme>/assets/js/等任意のjsフォルダ内にアップします。
functions.phpを編集
前回と同様、functions.phpを使ってヘッダーに読み込ませます。ダッシュボード→外観→テーマエディターよりfunctions.phpを編集します。以下のページを参考にさせていただきました。
テーマにJavaScript（jsファイル）を正しい方法で読み込む – THE WORDPRESS PRESS
/* Adobe Fonts 読み込み */
function twpp_enqueue_scripts()
wp_enqueue_script(
'fonts-script',
get_stylesheet_directory_uri() . '/assets/js/adobe_fonts.js'
);
}
add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );前回と同様、get_template_directory_uri()とget_stylesheet_directory_uri()を間違えないようにします。
style.cssを編集
最後に読み込んだJSをCSSで指定してあげます。今回は大見出しの文字を太ゴB101に指定する事にしました。WordPressのカスタマイズ用のスタイルはstyle.cssに書いていくようになっているので、ダッシュボード→外観→テーマエディターよりstyle.cssを編集しました。各自お好みで。
h1.entry-title,h2 {
font-family: a-otf-futo-go-b101-pr6n,sans-serif;
font-style: normal;
font-weight: 400;
font-size: 1.5em;
}これを保存すれば、文字がカッコよく表示されることと思います。…んパッ！って感じですが。
コメント