Q&A
ネット接続しても自分のPCでは適用されていないのでしょうか？ローカル環境で作成中が見れないとの事でしょうか？
前提・実現したいこと
ワードプレスでLPサイトを作成しています。
googleフォントを読み込みたいです。
【追記】正確に言えば読み込めているけど、自分のパソコンだけ表示されないというのが謎です。
他のmac、Windows、スマートフォンなどなど様々なデバイスで確認しました。
発生している問題・エラーメッセージ
googleフォントを読み込んだのですが、 私のパソコンの全ブラウザ（safari,firefox,Chrome）で表示できませんでした。 他の人のMacやウィンドウズの各ブラウザでは問題なく表示されていました。（IE含む）（4人以上のPCで確認） 今回新しく作成したLPサイトなのですが、元々存在するLPサイトもwebフォントを使用しており、 そちらは適用されています。
該当のソースコード
head内の読み込み ↓ <link href="//fonts.googleapis.com/css?family=Cormorant+Infant" rel="stylesheet"> ［補足］ <link href="https://fonts.googleapis.com/css?family=Cormorant+Infant" rel="stylesheet"> でも確認済み。 CSSの記述 ↓（例） p { font-family: 'Cormorant Infant', serif; }
試したこと
・［補足］スーパーリロード
・［補足］各ブラウザのフォントの設定確認
・［補足］他のwebフォントは読み込んでいるのでクロスドメインの設定は問題ないと解釈
・ブラウザのキャッシュのクリア
・Googleフォントの読み込み方
↓
▼bodyに直に記述
▼CSSで読み込む
@import url('//fonts.googleapis.com/css?family=Cormorant+Infant');
・Macのセーブブート（自分のMacだけなので）
・Chromeの拡張機能の停止
補足情報（FW/ツールのバージョンなど）
Mac環境
・OS High sierra
［補足］
作業環境はオンラインです。
追記しましたが、ローカルでは試してません。オンライン環境です。
サイトのURLを掲載していただくことは可能でしょうか。
会社の規定によりそれはできません。できたとしても、ほかのパソコンでは反映されていると複数台、複数人で確認できているの意味がありません。私のパソコンでしかこの不具合は現在確認できておりません。
回答3件
0
たったいま解決したので追記させていただきます。
Macのfontbookに「Cormorant Infant」が入っていました。。。
googleで提供している「Cormorant Infant」フォントと、
Macにインストールした「Cormorant Infant」の数字の字体が違うことが原因だったようです、、、。
（表示したかったのはgoogle提供のフォントの方）
インストールしてないと思いこんでしまっておりました。思い込みは良くないですね、、、
このような干渉があるのだととても勉強になりました。
他にご回答いただきました皆様にもお礼申し上げます。
投稿2018/08/16 05:59
退会済みユーザー
総合スコア0
0
ベストアンサー
最低限の記述でGoogleFontsを適用してみました。
動くサンプル
こちらのサンプルを使用して質問者様のパソコンと他の方のパソコンで観た時にGoogleFontsが正常に表示されているか確認してみるのも良いかもしれません。
こちらのサンプルでも質問者様のパソコンでのみGoogleFontsが正常に表示されない場合はパソコンの設定の何かが原因かもしれませんね。質問者様はこの何かがを知りたいと思いますが。
何にせよ最低限の記述でGoogleFontsが正常に表示されるかも確認されるのもおすすめです。
投稿2018/08/12 04:37
退会済みユーザー
総合スコア0
サンプルありがとうございます。
お盆休み明けの作業となり、通常業務もあるので、すぐに「確認」というのが難しいのですが、こちらも試させていただきます。
おっしゃるとおり、はっきりした原因も知りたいのですが、正常に反映されることを優先したくおもいます。
私も原因が気になるので進展がありましたらこちらにてご共有願います。
宜しくお願いします。
もちろんです！
ただ通常業務が優先なので、少し長期になるかと思います。
（今回私のパソコンだけの不具合なので、お盆開けに公開となっても今のままの公開の可能性が高いです）
解決してもしなくてもご回答いただきました皆さまにはご連絡するようにします。
お時間頂戴しましたが、今回解決にはいたりませんでした、、、。
色々ご教授いただきましたのに申し訳ございません。
先にご回答していただいた方は退会済みでしたので、easy_no_easyさんをベストアンサーにさせていただきました。
引き続き調査をしていきたく思いますが、一旦質問を締めさせていただきます。
ありがとうございました。
たった今解決しました！
新たに回答に追記しました。
0
ローカルでページを開いていませんか？
もしそうなら、URLを https://fonts.googleapis.com/css?family=Cormorant+Infant に書き換えてみてください。
//fonts.googleapis.com のようにプロトコルを省略すると、そのページと同じプロトコルが使用されます。
ローカルであれば file://fonts.googleapis.com と解釈されるので、あなたのパソコンにファイルがなければフォントは読み込まれません。
追記
以下のコードをHTMLファイルとして書き出して開いてみてください。
html
1<!DOCTYPE html> 2<meta charset="utf-8"> 3<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cormorant|Cormorant+Infant"> 4<style> 5 .cormorant { 6 font-family: "Cormorant"; 7 } 8 .cormorant-infant { 9 font-family: "Cormorant Infant"; 10 } 11</style> 12<p> 13 ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.* 14<p class="cormorant"> 15 ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.* 16<p class="cormorant-infant"> 17 ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
投稿2018/08/10 11:15
編集2018/08/10 14:30退会済みユーザー
総合スコア0
ご教授ありがとうございます。
情報不足で失礼しました。
環境はオンラインで作業しております。
https:をつけての確認もしているのですが、やはり私のパソコンだけ表示ができないです。
いくつか質問します。
1. Googleフォントは読み込めていますか？
デベロッパーツールでフォントが読み込めているか確認してみてください。
2. @font-faceでGoogleフォントと同名のフォントを定義していませんか？
3. WordPressに古いCSSのキャッシュが残っていませんか？
4. あなたのパソコンにGoogleフォントと同名のフォントはありませんか？
1.読み込めてます。
デペロッパーツールでは何回も確認しております。
それに、記載通り他のパソコン数機では確実に表示を確認しております。
2.同名の、違うタイプのものは使用しております。
今回は下記を読みこみたく、
p {
font-family: 'Cormorant Infant', serif;
}
すでに読み込んで使用しているものは、
p {
font-family: 'Cormorant', serif;
}
数字の字体が違うで今回新たに読みこみました。
ちなみにCSSに!importantいれてもダメでした。
3.こちらの可能性考えたのですが、その場合他のパソコン環境でも見れていないなどありませんか？
4.ございません。
以上です。
追加ですが、html、CSSともにバリデートチェック済みです。
ファイル確認しました。
ありがとうございます。
大変申し訳ございませんが、明日からお盆休みに入ってしまい、作業環境につけないので、16日以降にこの方法で試させていただき、再度こちらにコメントいたします。
この方法と、ワードプレスのCSS読み込みのキャッシュ対策も合わせてやってみます。
しかし、自身のパソコンだけなので、書き方とかでも無いような気もします。。。
私がワードプレスの作業してたのでキャッシュが濃厚に思えてきました。
良い知らせを待っています。
横からスミマセン。
＞3.こちらの可能性考えたのですが、その場合他のパソコン環境でも見れていないなどありませんか？
→キャッシュはPCに残ります。
キャッシュクリアされていないのであればしてください。表示がおかしい時は「キャッシュクリア」「スーパーリロード」後の確認が必要です。
参考（MACのスーパーリロード）
https://www.benricho.org/Tips/page_reload/#mac
ありがとうございます。
試したことに記載してませんでしたが、どちらも試し済みです！
補足に追記しました。すみません。
あらゆるキャッシュクリアはためしたので、だから謎なのです、、、
回答に書いたことは試されましたか？
試したこと、に書いていないことはまだです。
再度のお伝えになりますが、お盆休み中で作業環境につけないので、試し次第こちらに書き込む予定です。
スーパーリロードなどに関してはお盆休み前に一連の流れとしてすでに試し済みでした。
状況だけ見ると「キャッシュ」が濃厚ですが、違うのですよね。
似たような現象でローカル環境では経験していますが（PC自体の不具合でした）、公開しているファイルにアクセスしても同様な症状は初めてですね。
実際に表示されているフォントが判明すると、解決への手掛かりになりそうですね。
今なにもできないので確認できていること以外はなんともなのですが、、、
色々ヒントはいただいたので、自分でも調べ直してみようと思います。
CormorantとCormorant Infantは見た目が似ているフォントだから読み込めていないと勘違いした、なんてオチだったりして…。
数字が全然違いますよー
あなたの回答
tips
プレビュー
