セルフホスティングフォントとAdobe Fontsを混植しようとすると、セルフホスティングフォントが反映されない

[カク]

■ WordPress のバージョン
WordPress 6.7.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.29.0

■ Pro Unit のバージョン
0.28.0

■ スキンの種類
Origin III

■ 期待する動作
見出し部分の欧文フォントにセルフホスティングしたフォント、和文フォントにAdobe Fontsから読み込んだフォントを表示したいです。
該当URLでは例えばh3に指定した「イラスト　artwork」の「イラスト」がAdobe fontsの「reggae-one」、「artwork」が自分のサーバーにアップロードしてfont-faceに指定した「mh」になるはずです。

■ 自分で試した事
似たような症状がないかWebとフォーラムを検索しましたが見つかりませんでした、
CSSの書き方、書く位置が間違っていないか確認しましたが特にミスはなさそうです。
woffが壊れている可能性も疑いましたがフォントファイルには異常はありませんでした。
フォントファイルのパスもミスがないことを確認しました。
Chromeの開発ツールでスタイルを検証して見ましたが、font-familyで「mh」を指定している部分には取り消し線など表示されていませんでした。

■ 症状が発生するブラウザ
safari(iPhone,iPad)、Chrome(Windows)

■ 実際の症状
本来なら欧文フォントの「mh」が優先して読み込まれ、英字は「mh」、日本語は「reggae-one」になるはずですが、実際は英字も日本語も全て「reggae-one」になってしまいます。
なお、「mh」は大小アルファベットと一部記号以外のグリフを定義していないフォントです。

■ その他特記事項
子テーマのstyle.cssに記述した内容は以下です。また、header.phpにはAdobe Fontsからフォントを読み込むためのスクリプトを置いてあります。

font-face {
    font-family: "mh"; 
	 src: url("https://m-airou.com/amy/airou/wp-content/themes/lightningjr/fonts/MhWorld.woff2") format("woff2"),
          url("https://m-airou.com/amy/airou/wp-content/themes/lightningjr/fonts/MhWorld.woff") format("woff");  
	font-weight: 400;
}

h1 {
font-family: "mh", "reggae-one", sans-serif;
font-weight: 400;
}
/*以下、h6まで同文*/

テスト段階で、現在のフォントファイルに差し替える前に別のフォントファイルをアップロードして指定していたのですが、その時はうまく表示されていました。しかし、フォントファイルを本番用に差し替えた途端に表示されなくなり、テストフォントファイルに戻しても表示されなくなりました。

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[うなこ]

お世話になっております。

子テーマの style.css ですが、ファイルのエンコーディング（文字コード）が UTF-8 で保存していないのが原因の可能性もあります。

子テーマの style.css をエディタで開き、ファイルが UTF-8 エンコーディングで保存されているかの確認をお願いいたします。

VS Codeで確認する場合は、画面右下のエンコーディング表示部分で確認できます。
VSCでの文字コード変換方法

よろしくお願いいたします。

[カク]

うなこ様
おっしゃる通りstyle.cssの文字エンコードがautomaticになっていたので、UTF-8で保存し直しました。
しかしサイトをリロードしても改善しませんでした。

[うなこ]

カクさま

UTF-8で保存し直した style.css のファイルは、サーバーにも再アップロードしていただけていますでしょうか。
ご確認よろしくお願いいたします。

[カク]

FTPソフト上のテキストエディタでサーバー上にあるstyle.cssを直接書き換えています。

[石川＠Vektor,Inc.]

ウェブフォントの拡張子のファイルがご利用のサーバーで使える設定になっていないのではないでしょうか？

https://www.google.com/search?sca_esv=41cff334a491b950&sxsrf=ADLYWILJeubNDhK2yA7dpkU40aCtdQKZcQ:1733883815415&q=web%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88+%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BE%E3%82%8C%E3%81%AA%E3%81%84+%E6%8B%A1%E5%BC%B5%E5%AD%90&spell=1&sa=X&ved=2ahUKEwi78ZjH1J6KAxXroK8BHSUzO1kQBSgAegQIEBAB&biw=1565&bih=1485

[カク]

一応サーバ管理者に問い合わせてみますが、詳細に書いてあるとおり、同じwoffファイルでもテスト時は一瞬だけ使えました。

[石川＠Vektor,Inc.]

現状このあたりの手法で設定しますか？

https://plusoneweb.net/210415/

個別のコードでのカスタマイズ領域ですので、
フォントのセルフホスティングについて他に詳しい方がいればサポートいただければ幸いです。

[投稿者]

投稿