【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 というのは今回はじめて使用しています。

コメントを投稿

0 コメント