思い通りの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}

showkit

2020/06/27 04:40

「Google Fonts」以外のフォントを指定すれば、それは、反映されていますか？

Lhankor_Mhy

2020/06/27 04:44

Wordpress タグをつけた方が回答が付きやすいかもしれません。

yuna_

2020/06/27 04:46

はい、Google Fonts以外のフォントを指定したところ、しっかり反映されており、見た目も問題ないです。

yuna_

2020/06/27 04:47

失礼しました。ご指摘ありがとうございます。

Lhankor_Mhy

2020/06/27 04:56

CSS自体は普通に効いているので、PHPの問題のような気がします。 ↓サンプル https://jsfiddle.net/Lhankor_Mhy/wgqx3uf0/

yuna_

2020/06/27 05:02

わざわざありがとうございます！フォントはCSSだけの問題ではないのですね。。読み込ませる方法に問題があるのでしょうか。。

Lhankor_Mhy

2020/06/27 05:09

かもしれません。なので、Wordpressのタグをつけるようにおすすめをしています。現在のところ、CSSのタグしかついていないので、CSSに詳しい回答者は見に来ても、PHPやWordpressに詳しい回答者の目に留まりません。

yuna_

2020/06/27 05:14

なるほど。Wordpressのタグをつけて再投稿します。ありがとうございます。

Lhankor_Mhy

2020/06/27 05:16

あ、いえ、質問の編集をしてください。

yuna_

2020/06/27 05:42

編集できるのですね　ありがとうございます????????‍♀️????????‍♀️

行動規範の内容に同意します

回答1件

ベストアンサー

[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' );