ここ最近この件でもやもやしていてスッキリしたのでメモがてら参考になれば。
wordpressでcocoonのテンプレートを便利に使わせてもらっております。
webfontも標準装備してくれておりありがたい限り！早速M＋1Ｐにしたところ…
あれ、表示されない！！なぜ！？
今回の表示されない原因と対策
原因：googleの早期アクセス側が原因っぽい
今回の原因は、wordpressやテンプレート、サーバーの原因ではなく、単純にフォント自体の読み込み元のGoogle Fonts + 日本語 早期アクセスのサイト側の要因のようです。というのも早期アクセスのページを見てみると。。。
引用：Google Fonts + 日本語（https://googlefonts.github.io/japanese/）
これは見事なサンセリフ！！下の「Rounded M+ 1c」に関しては表示は問題なさそうです。
早期アクセスの読み込みスクリプト（※こちらですと現在読み込まれません）
<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" >現在はアクセス先のフォントは「M PLUS 1p」が表示されています。良かった！
対策：本運用しているgoogle Fontのページからコードをコピー
いつのまにか正式に運用されていたようです。こちらのページを参考に引用するコードを調整すれば問題ないはずです！（ここをチェックするのをうっかり失念しておりました。。）
引用：Google Font M PLUS 1p（https://fonts.google.com/specimen/M+PLUS+1p）
読み込むスクリプトはこちら（※こちらで表示されるようになります）
<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p" rel="stylesheet">
フォント使用の際は、CSS(スタイルシート）の記述をお忘れなく
font-family: 'M PLUS 1p', sans-serif;
私はと言うと、フォント自体を「Rounded M+ 1c」に変更してしまったのですが、テンプレート内のどこを調整すればいいかわかれば追記したいと思います！
また、今回の件に関してこちらのサイトを参考にさせていただきました。
ありがとうございます！
番外編：WEBフォントが表示されない！場合のチェック項目
個人的にうっかり表示されない！となる場合が多いケースをご紹介します。
読み込むスクリプトのURLをチェック
WEBフォントを使用したいサイトのURLをチェックし、必ずパスを合わせるようにしてくださいませ。
http://XXXXX〜の場合
<link href="http://fonts.googleapis.com/css?family=M+PLUS+1p" rel="stylesheet">
https://XXXXX〜の場合
<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p" rel="stylesheet">
ページによってhttp://とhttps://両方！って場合
http:を取って、//からはじまる下記のアドレスにすればOKです。
（※WEBにアップしていたり、ローカルでphpなどが動く環境の方は確認できますが、htmlのベタで作っている場合うまく動作しないのでhttp://〜 もしくは https://〜 で記載してください）
<link href="//fonts.googleapis.com/css?family=M+PLUS+1p" rel="stylesheet">
font-familyの設定をもう一度チェック！
font-family: 'M PLUS 1p', sans-serif;
意外と半角スペースで空けなくてはいけない箇所を全角スペースにしてしまったりしがち、、（経験談）必ずWEBフォントの配布元の正式な名前を書きましょう！
また、font-familyの書き方も要注意ですよー。
例）font-family: ‘M PLUS 1p’, sans-serif;
赤字：日本語を含むフォントの指定の際には必ず ”（シングルクォーテーション）か、“”（ダブルクォーテーション）で囲う。
青字：複数フォントを指定の際には ,（カンマ）で区切る。
緑字：英字フォントの場合はクォーテーション不要で記載してOK。
日本語フォント名はブラウザによって認識できない場合があるので、英字フォントも必ず指定を。
フォントファイルを別サーバーに置いている（クロスドメイン問題）
本ケースはブログをレンタルなどしていて、フォントファイル自体（otfやttf、woffファイル）を自身で契約しているサーバーから引っ張ってくるケースです。
この場合、フォントを置いているサーバーの該当ディレクトリに.htaccessファイルを作り、外部サーバーからのアクセスを許可するための記述を記載する必要があるようです。
ケースによるので一概こう！ということが言えないためまたしても参考になるリンクを記載します！
まとめ
WEBフォントに限らず、アクセスや表示などに問題があった場合は、あわあわせず、問題を細かく区切ってチェックしていくのが大事だと思いました。
- サーバーチェック
- 管理画面側での記述の見直し
- 素材自体（配布元含め）確認
意外と思い込みでチェック項目が偏ってしまうので反省メモでございました。
コメント