Adobeのフォントをheaderに読み込みたい。

♥ 0

いいねをした人: 居ません

このトピックには5件の返信、4人の参加者があり、最後にkumixにより3年、 4ヶ月前に更新されました。

6件の投稿を表示中 - 1 - 6件目 (全6件中)

投稿者

投稿
2020年5月17日 1:59 AM #51368

COMLS
閲覧者

♥ 7

トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。

【お使いの Snow Monkey のバージョン】
【お使いのブラウザ】chrome
【当該サイトのURL】（公開できる場合は書いていただいたほうがスムーズです）

===

Adobeのフォントを読み込みたいのですが、わからなかったので質問致しました。

♥ 0

いいねをした人: 居ません

2020年5月17日 1:38 PM #51375
キタジマタカシ
参加者

♥ 2253
Adobe のフォントの読み込み指定を知らないのでちょっと違うかもしれませんが、普通に head 内にタグを追加するだけであれば下記のページの方法でいけると思います。

head 要素内に独自のタグを追加する

なんらかのサービスのタグなどを head 要素内に入れたい場合は次のようなコードを追加することで入れることがで…

snow-monkey.2inc.org

あるいは link 要素を追加するのであれば、下記でも良いかもしれません。
```
add_action(
	'wp_enqueue_scripts',
	function() {
		wp_enqueue_style( 'フォント名', 'url' );
	}
);
```
関数リファレンス/wp enqueue style – WordPress Codex 日本語版

wpdocs.osdn.jp

♥ 0

いいねをした人: 居ません
2020年12月3日 11:02 PM #62191

kumix
閲覧者

♥ 0

【お使いのブラウザ】chrome

Adobe Fontsに関してのhead内への記述に関して追加で質問させてください。

先にご提示いただいたリンクを元に、My snow monkeyへ記述したいと思っています。

Adobeからは下記のコードをhead内に書くように指定されています。

この場合は教えていただいたコードと合わせてどのように記述すればいいのでしょうか？

自分なりに色々試してはみたのですが、不慣れなため全てエラーとなってしまいました。

お手数ですが、ご教示いただけますと助かります。よろしくお願いいたします。

<script>
(function(d) {
var config = {
kitId: ’emv8xxp’,
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&gt

♥ 0

いいねをした人: 居ません

2020年12月4日 10:21 AM #62222
Olein_jp
参加者

♥ 545
こんな感じですかねぇ。
```
/**
 * <head>〜</head>内にAdobe Fonts Scriptを挿入する
**/
add_action(
	'wp_head',
	function() { ?>
		<script>
(function(d) {
var config = {
kitId: ‘emv8xxp’,
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 }
);
```
Font AwesomeなどはCSSファイルを読み込む形でフォントを提供してくれたりしますが、その場合には @キタジマタカシさんが書かれているような形でファイルを指定して読み込む方法が推奨されます。

Adobe Fontsのように<script>〜</script>タグで読み込む場合には、それをJavaScriptファイルを作成して記載して、wp_enqueue_scriptsで読み込むか、僕が書いたような感じで<script>〜</script>を直接 wp_head() に挿入してしまうかのどちらかかなと思います。

個人的には前者をお勧めしますが、技術的に難しい場合は後者で対応することも可能です。参考にしてみてください。

♥ 26

いいねをした人:
2020年12月4日 11:54 AM #62230

キタジマタカシ
参加者

♥ 2253

オレインさんが書かれているとおりです！これで正しく読み込まれているのに、実際の画面にはフォントが反映されないということであれば読み込み順や CSS での指定について見直しが必要かもしれません。

♥ 1

いいねをした人: 居ません

2020年12月5日 3:56 PM #62352

kumix
閲覧者

♥ 0

オレインさん、キタジマさん、ありがとうございます！！

おかげさまで希望していたフォントを表示させることができました！

とても助かりましたm(_ _)m

♥ 0

いいねをした人: 居ません
投稿者

投稿