wordpressのフォントをstyle.cssによって指定する方法

###前提・実現したいこと
wordpressでホームページを作っているのですが、フォントファイルのことでよくわからないことがあるので質問させていただきます。
やりたいこととしては、ホームページのメニューバー（グローバルナビ）を希望のフォント（Mplus)でどのブラウザでも表示できるようにしたいです。

【使用環境、その他諸々】
CMS:wordpress
テーマ:simplicity(simplicity-childという子テーマで編集しています）
使用したいフォント:MPlus-1p-regular
使用環境:MAC OSX 10.11.4
使用できるブラウザ:Safari9.1、Firefox46.0.1、Google Chrome 50.0.2661.94 (64-bit)
（以下、関係ないと思いますが）
FTPソフト:FileZilla 3.17.0
テキストエディタ:2.0.2
サーバー:xserver
※ホームページはSSL付きのものです。

###発生している問題と試したこと
早速本題に移らせていただきます。
ホームページを作っている際、メニューバー（グローバルナビ）のフォントを変更したく、「フォントをサーバー上に直接入れるか、Webフォントの利用をするか」という2択を考えました。（プラグインはグローバルナビのフォントを変更できないと思ったので選択肢から抜きました）
ただ、フォントをサーバー上に入れるやり方（simplicity親テーマ上にフォントを入れ、style.cssからフォントを指定するやり方）が調べても全くもって見当がつかなかったため、Webフォント導入のやり方を選びました。
そして、色々と調べてみるとWebフォントのやり方には2方法があるとわかりました（定かではなく、全く見当違いの可能性もあります、すみません。）。
1つ目はhttp://mplus-webfonts.osdn.jpに書いてある

css
1@font-face{ 
2  font-family: 'mplus-1p-regular';
3  src: url('http://mplus-webfonts.sourceforge.jp/mplus-1p-regular.eot');
4  src: url('http://mplus-webfonts.sourceforge.jp/mplus-1p-regular.eot?#iefix') format('embedded-opentype'),
5       url('http://mplus-webfonts.sourceforge.jp/mplus-1p-regular.woff') format('woff'),
6       url('http://mplus-webfonts.sourceforge.jp/mplus-1p-regular.ttf') format('truetype');
7}

を(子テーマの？)style.cssに記述して該当箇所から font-family: 'mplus-1p-regular';として指定する方法、
2つ目はhttp://nelog.jp/google-web-fontの下の方にある

css
1@charset "UTF-8";
2@import url("../simplicity/style.css");
3@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700);

を（子テーマの）style.cssの先頭に記述して該当箇所から font-familyとして指定する方法です。

まず、1つ目のやり方をやってみました。
ただ、SSL証明書付きホームページなので、http://を使っているとfirefoxで「一部の接続だけが暗号化されています。」という表示が出てしまったた上（これはhttp://bge.jp/googlefont-stylesheet_in/にあるようにhttp://を//に変えれば治るのかもしれませんが【追記:mplusのwebフォントにはhttpsファイルがないようなのでhttpsで
開いたとき//ではmplus以外のフォントで表示されてしまうようです】）、
firefox(safari,chromeや別のパソコンのsafari(ver.7.0.6)ではなぜか大丈夫でした）ではフォントがMPlusに変わりませんでした。

2つ目のやり方では先ほどのものをMPlusにした

css
1@import url("../simplicity/style.css");
2@import url(http://mplus-webfonts.sourceforge.jp/mplus-1p-regular.ttf);
3```でやってみました。ただ、これもfirefoxで「一部の接続だけが暗号化されています。」とでた上、safariやchromeでしか表示されませんでした（この場合では別のパソコンのsafari(ver.7.0.6)でも表示されませんでした）。
4
5一応、1つ目も2つ目もやらず、該当箇所の指定（具体的には以下）
6```css
7#navi ul li a {
8  font-family: 'mplus-1p-regular';
9}
10```だけと言うパターンでもやってみましたがその場合はsafari、chromeでは問題なく表示され、firefoxと別のコンピュータのsafariでは表示されませんでした。（ということは閲覧環境によってsafariやchromeはフォントを表示しているのでしょうか？）
11
12このような感じで、Webフォントを入れようとしてはいるのですが、cssの詳しい読み方がわからないため（上記のcssが何を示しているかがよくわからない感じです。よかったら上の意味も教えていただけると幸いです）、悪戦苦闘している状態です。
13
14この様子から見て1つ目のやり方が近そうな感じ（他のパソコンのsafariでも表示されるため）なのですが、その状態からどうfirefoxで表示させる状態に持っていけばいいかがわかりませんし、本当にsafariやchromeで表示ができるのかも不安です。また、InternetExplorerとかでも表示ができるのかがわかりません。（firefoxはクロスドメインの問題とかも何かあるようですがその辺の知識も理解できていない感じです、申し訳ありません。）
15
16###質問
17どうすればグローバルナビのフォントをfirefoxで変えられるでしょうか？
18申し訳ありませんが未熟者でcss、html、phpはあまりわかっていないのでわかりやすく説明していただけると助かります（初歩の初歩くらいはわかりますが...）。お手数をおかけしますが、どうぞ宜しくお願いします。
19
20###補足情報
21言語:CSS,PHP,HTML
22
23※別に、webフォントを使わないやり方でサーバーに直接入れられるのであれば、それでも問題ないです。

行動規範の内容に同意します

回答1件

ベストアンサー

【解決案】
補足情報にあります通り自サーバー内で完結させれば解決しそうです。（safariやchromeはhelperが頑張ってくれているのかもしれません）
0. M+ Web Fonts Project 提供ファイル一覧から提供されているfontファイルをダウンロード
0. サーバーのテーマファイルフォルダの任意の場所にアップロード。
0. style.cssなどに追記。

css
1@font-face{ 
2  font-family: 'mplus-1p-regular';
3  src: url('fontデータをアップロードしたフォルダ/mplus-1p-regular.eot');
4  src: url('fontデータをアップロードしたフォルダ/mplus-1p-regular.eot?#iefix') format('embedded-opentype'),
5       url('fontデータをアップロードしたフォルダ/mplus-1p-regular.woff') format('woff'),
6       url('fontデータをアップロードしたフォルダ/mplus-1p-regular.ttf') format('truetype');
7}

SSLを使用するなら外部参照する際も全てSSLでないと有効にならないと思います。
style.cssに追記するなら相対パス、head内で読み込むなら<?php echo get_template_directory_uri(); ?>をつけて絶対パスでアップロードしたfontデータを参照すれば、自サーバSSL内で完結できると思います。

投稿2016/05/07 15:14

編集2016/05/07 15:16

callmehappening

総合スコア91

moiyabi

2016/05/08 17:55 編集

ご回答ありがとうございます。返信遅れてすみません。回答してくださった方法でやってみたのですが、safari(または別のパソコンのsafari)では表示されるもののfirefoxやchromeでは表示されない状態に陥ってしまいました(IEではわかりませんが（【追記】RemoteIEという方法でIEでもやってみましたがIEでも表示されないようです）。） mplusサイトのwoffにどこか問題があるのかとも思い、ttfをwoffに変換するソフトを使ってttfからwoffを作ってそれを指定したりもしましたがそれでもうまくいかない感じです。他にどのような問題が考えられるでしょうか？お知恵を拝借できると幸いです。お手数をおかけしますがどうぞよろしくお願いします。

callmehappening

2016/05/09 14:37

ChromeとFirefoxでfontファイルが正常に読み込まれていますか？ mplus-1p-regularを適用させたい要素に対して、Chromeなら【検証】、Firefoxなら【要素を検証】して[Element] -> [Computed] -> [Rendered font]（Chromeの場合） or [インスペクタ] -> [フォント]（Firefoxの場合）で確認できるはずです。

moiyabi

2016/05/11 00:13

ご返答ありがとうございます。要素を検証してみました。fontファイルが読み込まれていなかったようです。ただ、無知で申し訳有りませんが、読み込まれていないということはどのような理由によるものでしょうか？再度ご返答いただけるとありがたいです。宜しくお願いします。

callmehappening

2016/05/11 05:06 編集

考えられるのは、CSSで@font-face -> font-familyに指定したsrcディレクトリ階層の参照、ファイル名、拡張子が誤っているため、woff,truetype,eot,IEfix済みのeotの計4つのソース全てのロードに成功していない可能性です。いずれかの読み込みに失敗している場合、確認を行っているブラウザのバージョンによってはWebフォントが適用されません。 woffの場合、Chrome 6以上, Firefox 3.6以上, IE 9+, Safari 5.1+ ttfの場合、Chrome 4など, Firefox 3.5, Opera 10+, Safari 3 - 5 eotの場合、IE9・10、旧IEも同じくです。

moiyabi

2016/05/11 12:36

何度もご返答いただきありがとうございます。 callmehappeningさんに言われていろいろ確認してみたところ、#navi ul li aのところに全角スペースが空いていることがわかりました。その後訂正するとうまくいったので、おそらくこれが原因だと思います。やっとうまく解決できました。僕の勘違いでここまでやっていただいたこと本当に感謝しています。ありがとうございました。

行動規範の内容に同意します