【CSS】iPhoneで指定の英字フォントが表示されない。

実現したいこと

ワードプレスでサイトを作成しています。
日本語はNoto Sans JP、英語はVollkornというフォントに指定しましたが、
iPhone8でフォントを確認すると、数字がVollkornになってしまうので、
数字をNoto Sans JPにしたいです。
（Noto Sans JPではなくても、一般的な数字が出ればOKです、
Vollkornの数字は個性的すぎて合わないのが理由です。）

グーグルクロームでは、PC版、そしてデべロッパーツールで
iPhoneのメディアクエリのサイズでも下記の画像の様に、
数字はNoto Sans JPで、表示されています。
ただ、iPhoneになると、Vollkornの数字が下記の画像の様に指定されてしまいます。

前提

functions.phpに下記を記載しています。

wp_enqueue_style('fontstyle-googlefont-noto',
                 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;300;400;500;700&display=swap',
                 array()          
                );
wp_enqueue_style('fontstyle-googlefont-Vollkorn',
                 'https://fonts.googleapis.com/css2?family=Vollkorn&display=swap',
                 array()          
                );

そして、CSSには、

@font-face {
font-family: number;
src: local('Noto Sans JP');
unicode-range: U+0030-0039;

}

html {
font-size: 16px;
font-family: number,'Vollkorn','Noto Sans JP',sans-serif;
}

と書いています。

発生している問題・エラーメッセージ

画像の様に、数字にVollkornが指定されてしまう。

該当のソースコード

上記に記載しています。

試したこと

fontを変えたり、英語のみをVollkornにしたりとしましたが、うまくいきませんでした。
キャッシュも溜まっていません。

補足情報（FW/ツールのバージョンなど）

@font-face というのは今回はじめて使用しています。

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

回答1件

ベストアンサー

　Googleフォントで読み込んでいるのに、src:local()でインストールされたフォントを読みに行っていることについて、違和感があります。その iPhone8 には Noto Sans JP が本当にインストールされているのかどうか、確認してみてはどうでしょうか。

　ローカルにあるフォントを使うのか、webフォントを使うのか、しっかり決めてフォールバックさせるのがいいかもしれません。あるいは、読み込んでいるGoogleフォントのCSSを読んでみると、何か得ることがあるかもしれません。
https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;300;400;500;700&display=swap

投稿2023/07/19 09:45

Lhankor_Mhy

総合スコア37445

SAZABY

2023/07/19 10:19

ご返事ありがとうございます。おっしゃる通りで、@font-faceというのをもう少し勉強してみました。で、結局のところ英語だけ、Vollkornというフォントにしたかったので、サブセットフォントメーカーとWOFFコンバータを使って、英語だけを指定しサブセット化してみましたら、難しかったですが、無事思いの通りになりました！@font-faceの便利さに驚いてます。