質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.81%

safariだけwebフォントが適用されない

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 12K+

MiiiRiyu

score 26

実現したいこと(改変)

webフォントの表示を、
iphoneや、PCで見た時など、
どのブラウザでみても同じにしたい。

知人のiphoneで見た時に、表示が異なっていました。
(ブラウザは恐らく標準ブラウザのsafariだと思います)

発生している問題(改変)

画像の上に文字を重ねているのですが、
その文字がiosではフォントが正しく適用されません。

PCでもsafariでみるとやはりダメでした。

かなり初歩的な質問かと思いますが、よろしくお願いします。

追記 (※コードのみ全文再掲載)

画像と文字、コードなど少し改変して、
載せています。(悩んでいること自体は同じです)

<Chrome>
Chromeでの表示

<Safari>
サファリでの表示

<index.htmlの記述全文>
<!DOCTYPE html>
<html Lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
<meta name="viewport" content="width=device-width">

<!--******** noindex ********-->
<meta name=”robots” content=”noindex” />
<!--*****************************-->

<link rel="stylesheet" href="style.css">

</head>
<body>
<div class="c-wrap">
<p><img src="img/circle.png" alt=""></p>
<p class="c-en">circleEN</p>
<h2 class="c-jp">サークルJP</h2>
</div>
</body>
</html>

<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のフォントで表示させたいです。
となると、やはり画像としてしまうのが一番手軽なのかもと感じています。
ただ、容量や、今後大幅に改変することになると手間でしょうけど・・・

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yoshinavi

    2019/04/23 20:53

    webフォントが適用されていない、との事ですか?開発ツール等での確認はどうですか?

    キャンセル

  • yoshinavi

    2019/04/24 02:40

    どのように崩れてるのでしょうか?
    スクリーンショットと、症状が再現するコードを提示されると良いかと思います。

    キャンセル

  • MiiiRiyu

    2019/04/24 14:25

    画像と文字を変え、似たような症状がでるコードと画像を載せれるかやってみます!ありがとうございます!

    キャンセル

回答 2

checkベストアンサー

+5

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独自の仕様ということなんでしょうね。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/24 17:24

    追記:HTMLとCSSの全文再掲載いたしました。
    おそらく初歩的なことでミスってるのかと思います><

    キャンセル

  • 2019/04/25 00:27

    原因わかったので回答に追加しましたー。
    これはなかなか気づきにくいですわ。。。Safari。。。

    キャンセル

  • 2019/04/25 22:12

    すごっ!!反映されましたーーーーーーーーーー!!!
    うれしいです!
    これは自分では解決できなかったでしょうね><
    本当にありがとうございます!!助かりました!!

    キャンセル

+1

iphoneで見た時とPCで見た時のフォントの表示を同じにしたい。

残念ながら、完璧な方法はありません。同じフォントを使っても、ブラウザによってレンダリング結果は異なります(ともすれば、同じパソコンのChromeとFirefoxで違う、ということもあります)。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/24 14:22

    同じフォントを使っても、ブラウザによって異なる場合があるのですね。
    その影響もあり、少し位置がずれることもあるのかなと感じました。

    容量と今後の改変などを考えると画像と文字を一括にするのは避けたかったのですが、
    そのことも視野にいれようと思います。
    ありがとうございます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.81%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る