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

0
いいねをした人: 居ません
  • このトピックには5件の返信、4人の参加者があり、最後にkumixにより3年、 2ヶ月前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #51368
    COMLS
    閲覧者
    7

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

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

    ===

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

    0
    いいねをした人: 居ません
    #51375
    キタジマ タカシ
    参加者
    2201

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

    あるいは link 要素を追加するのであれば、下記でも良いかもしれません。

    add_action(
    	'wp_enqueue_scripts',
    	function() {
    		wp_enqueue_style( 'フォント名', 'url' );
    	}
    );
    0
    いいねをした人: 居ません
    #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
    いいねをした人: 居ません
    #62222
    Olein_jp
    参加者
    543

    こんな感じですかねぇ。

    /**
     * <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
    いいねをした人:
    #62230
    キタジマ タカシ
    参加者
    2201

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

    1
    いいねをした人: 居ません
    #62352
    kumix
    閲覧者
    0

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

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

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

    0
    いいねをした人: 居ません
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • このトピックに返信するにはログインが必要です。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。