目次
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はフッターに読み込ませたほうが良いかも のちほど洗い出して整理の予定
コメント