上記だけはWebフォントを読み込んでいないのでクライアントにそのフォントがインストールされていないと動きません。(おそらく、他の部分に書いているのだとは思いますが…)
ご返信いただき、ありがとうございます！
フォントをインストールしているというのは、この部分でしょうか？
@import url(サーバーのフォント格納フォルダURL);
初歩的な質問で、申し訳ありません。
突然フォントが使用できなくなる原因について、参考情報をいくつか書きます。
- 使っているサーバーがクロスドメインまわりのアクセス制限をきつくしたためにウェブフォントファイルへ外部からアクセスできない状態に変わってしまった。
（該当してるかの確認方法）簡単なHTMLを書き、複数のブラウザでそれを開いてみて、各ブラウザにて、今現在でも、そのウェブフォントがちゃんと表示されるかもう一度確認してみる。
（該当してた場合の対処方法）.htaccesssとかの設定を変える。
- 他のCSSがフォント関連の指定を上書きしている
（該当してるかの確認方法）ブラウザの解析機能（Google Chromeの「検証」とか）でCSSがどう解釈されてるか確認してみる。
（該当してた場合の対処方法）他のCSSの記述をさらに上書きする強そうな書き方に変えてみる。
- ページに読み込まれるウェブフォントの数があまりにも多いと、＠importでの指定が無視されることがある気がする（根拠はなし）
（該当してるかの確認方法）可能であれば、link要素を用いたロードの仕方に変えてみて、それで動きが変わるかためしてみる。
（該当してた場合の対処方法）＠import指定や@font-face指定をlink要素での指定に置き換える。
最初のクロスドメインどうたらについて。たとえばこんなHTMLを書いて、いまでもちゃんと表示されるかアクセスしてみてください。表示されなかったら、.htaccessを書き換えるとかの対策が要ります。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@font-face {
font-family: "myFont";
src: url("http://meta-scheme.jp/software/font/ArmedBanana.woff") format('woff');
}
.myFontClass {
font-family: "myFont";
}
</style>
</head>
<body>
<p>サンプル文字列は「<span class="myFontClass">サンプル文字列</span>」です。</p>
</body>
</html>
対策の参考情報はこちらです。
http://meta-scheme.jp/2445
二番目のCSS云々について。たとえばGoogle Chromeで以下の手順をやってみます。
- 問題のウェブページを開く
- 「ここは絶対に私が指定したウェブフォントになっていなきゃおかしい」という辺りの文字列を選択なりマウスフォーカスあてるなりする
- 右クリック－＞検証
- 開いた画面の「Style」タブや「Computed」タブを見て、最終的に効いてるfont-familyを確認する
で、もしも、他のプラグインとか、テーマとか、新しいコアとかが仕掛けたCSSに負けてて、所望以外のfont-familyになっちゃってるようだったら、「!important」の乱発とか、勝てる書き方に変えてみてください。
三番目のは山勘なんですけど、なんか、私のサイトで、大量のウェブフォント使ってるページで、一部のフォントがロードされなくなって、＠importをlink要素で書く書き方に置き換えたらうまくいったことがあったので、link要素指定に変えられるなら変えてみるといいんじゃないかな、と。例えば、以下のURLがその例なんですけど、
http://option-font.tumblr.com/option-font-list
このURLで使ってる中国語フォントのcwTeXHeiとか、＠importだとfirefoxとかiOSのブラウザとかで無視されがちだったんですが、以下の書き方にしたら効きやすくなった気がしたんですよね。
<link href="http://fonts.googleapis.com/earlyaccess/cwtexhei.css" rel="stylesheet" type="text/css"/>
なんでそうなるのか、理屈はまったくわからないんですけど（笑）。
以上、参考情報でした。
tg29359さん
ご返信いただき、ありがとうございます！
頂戴したアドバイスを元に一日中画面とにらめっこをして、ようやく何とか状況が改善しました。
残念ながらまだはっきりと原因がわかっていないのですが、ひとまずGoogleからフォントを引っ張ってくる形で見た目は何とかなりました。
何故か以前のスクリーンショットと比べると、少し書体が違うのが気になるのですが…
ガタガタの書体から脱しただけでも、かなり見た目はましになりました(^^;)
丁寧に色々と教えていただき、本当にありがとうございました。
そもそも基本の考え方がよくわかっていないド素人なので、とても参考になりました。
まったくの余談ですが、私は自サイトで、ダッシュボード－＞外観－＞CSS編集にて、以下の設定をしています（外観の下のCSS編集は、もしかするとJet Packプラグインを入れてないと出てこないかもしれません）。Twenty SixteenやTwenty Fifteenを想定した設定なので、他のテーマだと使えないかもしれませんが。
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 500;
src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff) format('woff'), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.otf) format("opentype");
}
#page *, #sidebar * {
font-family: メイリオ, Meiryo, 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, 'Noto Sans JP', Times New Roman, serif !important;
font-weight: normal;
}
この設定をすると、見た目は以下になります。
http://meta-scheme.jp/
狙っているのは
- Windows端末でメイリオ適用
- Mac、iOSで游明朝かヒラギノ明朝
- Android端末でNoto Sans JP
です。
本当は明朝系で統一したかったのですが、Windows端末とAndroid端末で広く使えそうで綺麗な明朝体フォントがどれかわからなかったので、ゴシック系で諦めました。Noto Serif JPが欲しいと切望しております。
ただ、この設定すると、Windows端末上のChromeでダッシュボード見た時、文字が異様に見にくい気がします。あと、Android端末でのNoto Sans JPの字体が無骨で嫌なのですが、端末内蔵フォントだと異体字とか弱かったりするんで、諦めて使ってます。Windows端末でのメイリオは、たぶんゴシック系だと思うんですけど、わりと綺麗で特に気にならないです。Windows系のモバイル端末で見たことがないので、もしかしたらとんでもなく汚いかもです（メイリオ入ってるかどうかもしらないし）。
ちなみに、Noto Sansは、普通にGoogle Fontをそのまま見に行けばいいのかと思ってたら、日本語対応版はちゃっかりEarly Accessにしかなかったという点に、最初、結構ハマリました。
tg29359さん
またも丁寧にご返信いただき、ありがとうございます！
ちょうどAndroid端末での字体は変えたいなぁ…と思いつつよくわからないので放置していたのですが、頂戴したアドバイスのおかげで何とか分けることに成功しました！
素人すぎて本やインターネットを読んでもよくわからない点が多々あったのですが、親切に教えていただいたおかげで解決でき、とても嬉しいです。
ここ数日ずっと悩まされていたので、肩の荷が降りた気分です(笑)
お忙しい中丁寧にアドバイスを頂き、本当にありがとうございました！
前の書き込みの別な書き方を付記します。
@import "http://fonts.googleapis.com/earlyaccess/notosansjp.css";
#page *, #sidebar * {
font-family: メイリオ, Meiryo, 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'Noto Sans JP', 'Times New Roman', serif !important;
font-weight: normal;
}
もしかしたら、多少、重くなるかもしれませんが、こっちの方が素直な書き方で良いかもしれません。文字は、前のと比べると、もしかしたら若干細くなるかもです。前のはミディアムだけ狙い撃ちで使っていたので。
ちなみに、久しぶりにGoogle Fonts Early Accessを覗いたら、Noto Sans JPとNoto Sans Japaneseがあって、「どこがどう違うんだ？」と迷いましたが、文字数が多めに書いてあったNoto Sans JPの方を選びました。
すいません、さらに訂正です。余計なfont-weight指定が入ってました。これが入っていると、記事の中でstrongタグを指定しても効かなくなっちゃいます。外してください。
訂正後のイメージは下記です。
@import "http://fonts.googleapis.com/earlyaccess/notosansjp.css";
#page *, #sidebar * {
font-family: メイリオ, Meiryo, 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'Noto Sans JP', 'Times New Roman', serif !important;
}
