WordPressにAdobe Web Fontsの読み込み

  • 投稿日
  • 著者 Sea to Sky webdesign blog
  • カテゴリー web制作
  • カテゴリー WordPress

function.phpにアクションフックで、使用するAdobe webフォントのscriprコードを読み込む。

子テーマをダウンロード

使用中のテーマのファイルに直接編集すると、テーマが更新（アップデート）されると新しいテーマに上書きされて消えてしまうので、子テーマ用意して編集してください。

SNOW MONKEYの場合は、プラグインmy SnowMonkeyでOK！

子テーマの中のstyle.cssファイルを任意の内容に編集しておく
/*
Theme Name: ○○○○Theme Child 
Theme URI: ★ テーマの公式サイトなどのURL（空欄でも可） ★
Template: ○○○○Theme
Description: ★ テーマの説明（空欄でも可） ★
Author: ★ テーマ作成者の名前（空欄でも可） ★
*/
FTPで変更した子テーマフォルダを、テーマフォルダ「○○○○Theme」と同じ階層の
/wp-content/themes/ ディレクトリにアップロードし、有効化してください。
子テーマの中のfunction.phpをコードエディタで編集（ファイルがない場合は新規作成）
使用するAdobe Webフォントのscriptコードをコピペして、書き込む。
/**
 *add_actionで <head>〜</head>内にAdobe Fonts Scriptを挿入
**/
add_action(
	'wp_head',
	function() { ?>
/**↓ここにscriptコードをコピペ**/
		<script>
  (function(d) {
    var config = {
      kitId: 'wrk0gwm',
      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%7C%7Ca&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);
</script>
/**↑ここまでscriptコードをコピペ**/
	<?php }
);
FTPで上記で編集したfunction.phpファイルを上書き保存
子テーマのCSSカスタマイズで、font familyの指定をする
p{
font-family: ryo-display-plusn, serif;
font-weight: 700;
font-style: normal;
}
プレビューにて、フォントが適用されているか確認！