質問: ### 実現したいこと(改変) webフォントの表示を、 iphoneや、PCで見た時など、 どのブラウザでみても同じにしたい。 知人のiphoneで見た時に、表示が異なっていました。 (ブラウザは恐らく標準ブラウザのsafariだと思います) ### 発生している問題(改変) 画像の上に文字を重ねているのですが、 その文字がiosではフォントが正しく適用されません。 PCでもsafariでみるとやはりダメでした。 かなり初歩的な質問かと思いますが、よろしくお願いします。 追記 (※コードのみ全文再掲載) ---------------- 画像と文字、コードなど少し改変して、 載せています。(悩んでいること自体は同じです) <Chrome> ![Chromeでの表示](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/b84b5de4fc313b8696c687c8a74be665.png) <Safari> ![サファリでの表示](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/3910c2cf77d39ab52bf8461ec1f2ccb7.png) <index.htmlの記述全文> test circleEN サークルJP <style.cssの記述全文> @charset "utf-8"; @import url('https://fonts.googleapis.com/css?family=Josefin+Slab:400i|Noto+Sans+JP|Noto+Serif+JP'); *::before,*::after, * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .c-wrap,.c-wrap p{ position:relative; display: flex; flex-direction: row; justify-content: center; width:100vw; height:auto; top:30px; margin-bottom:200px; } .c-wrap img{ position:absolute; z-index: -1; width:130px; height:auto; opacity: 0.5; } p.c-en{ position: absolute; font-size:50px; font-family: 'Josefin Slab', serif; top:10px; text-shadow:3px 3px 4px white; } h2.c-jp{ position: absolute; font-size:15px; font-family: 'Noto Serif JP', serif; top:110px; text-shadow:1px 1px 1px white; padding-right:5px; font-weight: normal; /*追加*/ } safariでも、 Chromeのフォントで表示させたいです。 となると、やはり画像としてしまうのが一番手軽なのかもと感じています。 ただ、容量や、今後大幅に改変することになると手間でしょうけど・・・
回答: Google Fontsで指定されている方法で正しく読み込めば、 Safariでも正しく表示されるはずです。 それでもSafariだけ正しく読み込めないということであれば、 どこか他のところに原因がある可能性もあるかと思います。 1. HTML、CSSともにバリデーターにかけてエラーがないか確認し、エラーがあるようであれば修正した上で Google Fontsの表示を再確認する 2. 1でダメならまっさらなHTML・CSSを用意して、GoogleFontsの指定だけを試して正しく表示されるか確認する 3. 2で正しく表示されるのであれば読み込み方法は正しいので、他の部分に問題があることはほぼ確定。 あとは地道に少しずつ必要なCSSを足していってどこで表示されなくなるか確認し、問題のコードを調査する といった感じで頑張って調べてみるしかないかもですね。 ---ここから追記--- 情報が追加されたので試してみました。iPhoneでは見てないのでSafariとChromeの比較になりますがご了承ください。 結論から言うと、私の環境(Mac)ではSafariでもChromeでも同じフォントで表示されます。 ▼Chrome !Chrome ▼Safari !Safari CSSは以下のとおり。 `/*追加*/`とある行以外は掲載されているCSSママです。 ``` @import url('https://fonts.googleapis.com/css?family=Josefin+Slab|Noto+Serif+JP'); /*追加*/ .c-wrap,.c-wrap p{ position:relative; display: flex; flex-direction: row; justify-content: center; width:100vw; height:auto; top:30px; margin-bottom:200px; } .c-wrap img{ position:absolute; z-index: -1; width:130px; height:auto; opacity: 0.5; } p.c-en{ position: absolute; font-size:50px; font-family: 'Josefin Slab', serif; top:10px; text-shadow:3px 3px 4px white; } h2.c-jp{ position: absolute; font-size:15px; font-family: 'Noto Serif JP', serif; top:110px; text-shadow:1px 1px 1px white; padding-right:5px; font-weight: normal; /*追加*/ } ``` IE11のようにGoogle Fonts自体がサポートを切ってしまった環境もあるので Webフォントだからと言って全ての環境で表示されるとは限らないですが、 各デバイスにインストールされているフォント環境に依存せず、同じフォントを見せられるのが Webフォントのウリなわけですから、フォントやサービス自体が非対応(orバグがある等)でもない限りは 正しく読み込めていれば違いはないはずです。 追加されたキャプチャを見る限り、環境依存とかデバイスごとの違いとかの以前に、 明らかにSafariだけ指定のWebフォントが読み込まれていない(適用できていない)です。 掲載されている情報以外に、絶対何か他の原因があるはずです。 ---ここから更に追加--- Safariだけ適用されない原因(?) 分かりました。 `@import url('https://fonts.googleapis.com/css?family=Josefin+Slab:400i|Noto+Sans+JP|Noto+Serif+JP');` 読み込んでいる欧文フォントが「イタリック体」 なので、 Safariでは `font-style: italic;` の1行が必要だったようです。 ``` p.c-en{ position: absolute; font-size:50px; font-family: 'Josefin Slab', serif; top:10px; text-shadow:3px 3px 4px white; font-style: italic; /*追加*/ } ``` 前回私の方でテストしたのが普通にSafariでも読み込めたのは、 読み込んでいるWebフォントがイタリック体ではないものだったからのようです。 イタリック体の書体を指定した際に、font-styleの指定を併記しなければ適用されないというのが Safari独自の仕様ということなんでしょうね。