iOSのみGoogleフォントが指示通りに表示されない。

Question

実現したいこと

iOS（iPhone・iPad）にてGoogleフォントのNoto Serif JPを表示させたい。

発生している問題・分からないこと

WordPressのテーマSwellをCSSをしようとしてカスタムしています。
GoogleフォントのNoto Serif JP（子テーマから指定）とNoto Sans JP（テーマ付属）をheaderからリンクさせて設定しているが
Chrome、macOSのSafari、Firefoxでは両方とも指示通り表示されているが
iOSのSafariではNoto Serif Jpではなく違う明朝体（恐らくデフォルトのもの）が表示されます。

iPhoneをMacに接続して検証しましたが、CSSの指定・フォントの固有名詞共にNoto Serif Jpが指定されています。

エラーメッセージ

エラーは出ていません

該当のソースコード

:root{
    --mincho-text: "Noto Serif JP","Noto Serif Japanese","游明朝", "Yu Mincho", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN" ,serif;
}
html{
	font-size: 100%;
}
body{
	font-size:var(--font16);
    /* font-family: var(--swl-font_family); */
    font-weight: var(--swl-font_weight);
    font-style: normal;
    font-optical-sizing: auto;
    background-color: #fff;
    font-variant-ligatures: none;
    -webkit-font-feature-settings: "palt";
}

.header-title .main-title{
    font-family: var(--mincho-text);
    font-weight: 200;
}

<!--テーマ付属-->
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&#038;display=swap" rel="stylesheet">

<!--子テーマから指定-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;600&family=Noto+Serif+JP:wght@200..700&display=swap" rel="stylesheet">

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

AI（Chat GTP、Claude、Gemini）でも調査し、以下の対応を行いましたが変化がありませんでした。

・.htaccessの修正
・フォントファイルをサーバーにアップ

補足

特になし

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、問題が確認できませんでした。
https://codepen.io/lhankor_mhy/pen/WboEPdv

Answer 1

以下のようにウェイトを個別に指定した場合はいかがでしょうか？

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;600&family=Noto+Serif+JP:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">

Comments

[スズキマイ]

ご回答ありがとうございます。
こちらも試してみましたが変化がなく解決できませんでした。
この場合どの辺りに原因がありそうでしょうか？

[keniroya]

可変フォントに対応していないブラウザだと
「wght@200..700」という表記が使えないのかも？という仮説です。
参考）https://developers.google.com/fonts/docs/css2?hl=ja#legacy_browser_support

もしかしたら、単純に、
こちらのセレクタ「.header-title .main-title」の指定が間違っている可能性はないでしょうか？

※一部ブラウザでは、寛容な解釈をされ表示できるが、
厳格なブラウザではNGになるといった可能性もあります

[スズキマイ]

すみません。
お客様に確認したところ、「こちらでは表示に問題ない」とのことでした。
iOSのブラウザキャッシュを消したり等は行ったのですが、ルーターあたりでキャッシュが残っていたのかもしれません。
ご対応ありがとうございました。