Q&A
「Google Fonts」以外の フォントを指定すれば、それは、反映されていますか？
前提・実現したいこと
google fontsにあるGreat vibesを使用したいです。
function.phpでGoogle Fontsを使用できるようにし、
CSSにて、font-familyで指定したところ、思っていたフォントとは異なる雰囲気の文字が表示されてしまいます。
font-familyの指定が間違っているのかと思い、検証ツールで確認してみると
font-familyには、'Great Vibes'としっかり表示されています。
ブラウザの問題かと思いましたが、Chrome, safari両方でダメでした。
他に原因がわからないのですが、ChromeとSafari両方表示が違って見えるということはあるのでしょうか？
よろしくお願いします。
該当のソースコード
function.php
1function mytheme_enqueue(){ 2 3 wp_enqueue_style( 'mytheme-googlefonts', 'https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap', array(), null); 4} 5 6add_action( 'wp_enqueue_scripts', 'mytheme_enqueue'); 7
style.css
1header{ 2 grid-row: head; 3 justify-self: center; 4 align-self: center; 5 font-family: 'Great Vibes', cursive; 6 font-size: var(--f1); 7 letter-spacing: 1px; 8}
Wordpress タグをつけた方が回答が付きやすいかもしれません。
はい、Google Fonts以外のフォントを指定したところ、しっかり反映されており、見た目も問題ないです。
失礼しました。ご指摘ありがとうございます。
CSS自体は普通に効いているので、PHPの問題のような気がします。
↓サンプル
https://jsfiddle.net/Lhankor_Mhy/wgqx3uf0/
わざわざありがとうございます！
フォントはCSSだけの問題ではないのですね。。
読み込ませる方法に問題があるのでしょうか。。
かもしれません。
なので、Wordpressのタグをつけるようにおすすめをしています。
現在のところ、CSSのタグしかついていないので、CSSに詳しい回答者は見に来ても、PHPやWordpressに詳しい回答者の目に留まりません。
なるほど。Wordpressのタグをつけて再投稿します。ありがとうございます。
あ、いえ、質問の編集をしてください。
編集できるのですね ありがとうございます????????♀️????????♀️
回答1件
0
ベストアンサー
[1]
何らかの理由で「'Great Vibes'」が読み込めておらず、次の候補の「cursive」のフォントが表示されているようです。まずは素直に<head>内に以下を記載して、表示できるか確認してみてください。
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
[2]
[1] でフォントの表示確認ができたら、「wp_enqueue_style」を使って読み込みをしてみてください。
下記参考サイトによると、以下のような記述になるようです。第2引数まで入力すればOKな模様です。
PHP
1function my_scripts() { 2 wp_enqueue_style( 'google-webfont-style', '//fonts.googleapis.com/css?family=Anton' ); 3} 4add_action( 'wp_enqueue_scripts', 'my_scripts' );
参考URL:
http://www.micro5.net/2018/02/12/google-web-fonts
font-family: 'Great Vibes', cursive;
ちなみに「cursive」は「筆記体」の意味で、特定のフォント名ではありません。
「ゴシック体」「明朝体」のようなフォントの種類、「総称フォントファミリ」です。
参考: 「cursive」についてページ内を調べてみてください。
https://developer.mozilla.org/ja/docs/Web/CSS/font-family
投稿2020/06/27 06:47
編集2020/06/27 06:54
総合スコア4528
あなたの回答
tips
プレビュー
