WordPressでAdobe FontsのTypekit Webフォントを使う(functions.phpを編集)

目次

Adobe Fontsからコードを取得

※Adobe Creative Cloudを契約している事が前提となります。

  • Adobe IDにログインし、Typekit Web フォントを開いて、好きなフォントを探します。
  • Webプロジェクトを作成するか、既存のプロジェクトにフォントを追加します。
  • Webプロジェクトを保存してから、所定のコードをサイトに貼り付けます。

JSファイルとして別に保存

ここでコピーしたコードから最初の<script>と最後の</script>を除いたコードをJSファイルとして使用します。テキストエディタに以下のようなコードを張り付け、adobe_fonts.jsとして保存します。(お好きな名前でOK)

 (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);

保存したadobe_fonts.jsを、前回にならって/wp-content/themes/customizr-pro-child/templates/inc/assets/js内にアップします。

functions.phpを編集

前回と同様、functions.phpを使ってヘッダーに読み込ませます。ダッシュボード→外観→テーマエディターよりfunctions.phpを編集します。以下のページを参考にさせていただきました。

/* Adobe Fonts 読み込み */
function twpp_enqueue_scripts() {
wp_enqueue_script(
'fonts-script',
get_stylesheet_directory_uri() . '/templates/inc/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;
}

これを保存すれば、文字がカッコよく表示されることと思います。…んパッ!って感じですが。

余談:

  • Customizrの日本語最適化についてはまた書きたいところ(全体的にメリケンなので)
  • CustomizrはGoogle Fontsが採用されているため、そちらに合わせたほうが良かったかも
    • でもAdbeCC契約してるなら使わないともったいないと思い使ってみました
  • JSはフッターに読み込ませたほうが良いかも のちほど洗い出して整理の予定
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

CAPTCHA


目次