WEBフォントの記述

あゆばなな
Adobeフォント
/**
* <head>〜</head>内にAdobe Fonts Scriptを挿入する
**/
add_action(
	'wp_head',
	function() { ?>
		<script>
(function(d) {
var config = {
kitId: ‘自分のadobefontのプロジェクト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>
	<?php }
);

①↑をfunction.phpに書く（これ書けばあとはcssでフォントを指定すれば、Adobeフォントは全部使える）
※プロジェクトID間違えないように！
(※head内に直接書き込める場合は<script>~</script>の部分のみ書き込む)

font-family: kozuka-gothic-pro, sans-serif;
font-weight: 700;
font-style: normal;

②↑をcssに書く。

①も②も、adobefontでフォントをプロジェクトに追加したらコピペできる物が出てくる！

Googleフォント

① functions/phpに以下のコードを書く
googlefontでフォントを選んだら表示される
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
のhttps://~の部分を↓に当てはめる！


// Googleフォント 追加
	wp_enqueue_style( 'google-webfont-style', 'https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap' );

② cssに↓を書く
これもフォント選んだら出てくる

font-family: "Roboto", Helvetica, Arial, sans-serif;

この記事が気に入ったらサポートをしてみませんか？