質問: ### 前提・実現したいこと 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に書いてある ``` @font-face{ font-family: 'mplus-1p-regular'; src: url('http://mplus-webfonts.sourceforge.jp/mplus-1p-regular.eot'); src: url('http://mplus-webfonts.sourceforge.jp/mplus-1p-regular.eot?#iefix') format('embedded-opentype'), url('http://mplus-webfonts.sourceforge.jp/mplus-1p-regular.woff') format('woff'), url('http://mplus-webfonts.sourceforge.jp/mplus-1p-regular.ttf') format('truetype'); } ``` を(子テーマの?)style.cssに記述して該当箇所から font-family: 'mplus-1p-regular';として指定する方法、 2つ目はhttp://nelog.jp/google-web-fontの下の方にある ``` @charset "UTF-8"; @import url("../simplicity/style.css"); @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にした ``` @import url("../simplicity/style.css"); @import url(http://mplus-webfonts.sourceforge.jp/mplus-1p-regular.ttf); ``` でやってみました。ただ、これもfirefoxで「一部の接続だけが暗号化されています。」とでた上、safariやchromeでしか表示されませんでした(この場合では別のパソコンのsafari(ver.7.0.6)でも表示されませんでした)。 一応、1つ目も2つ目もやらず、該当箇所の指定(具体的には以下) ``` #navi ul li a { font-family: 'mplus-1p-regular'; } ``` だけと言うパターンでもやってみましたがその場合はsafari、chromeでは問題なく表示され、firefoxと別のコンピュータのsafariでは表示されませんでした。(ということは閲覧環境によってsafariやchromeはフォントを表示しているのでしょうか?) このような感じで、Webフォントを入れようとしてはいるのですが、cssの詳しい読み方がわからないため(上記のcssが何を示しているかがよくわからない感じです。よかったら上の意味も教えていただけると幸いです)、悪戦苦闘している状態です。 この様子から見て1つ目のやり方が近そうな感じ(他のパソコンのsafariでも表示されるため)なのですが、その状態からどうfirefoxで表示させる状態に持っていけばいいかがわかりませんし、本当にsafariやchromeで表示ができるのかも不安です。また、InternetExplorerとかでも表示ができるのかがわかりません。(firefoxはクロスドメインの問題とかも何かあるようですがその辺の知識も理解できていない感じです、申し訳ありません。) ### 質問 どうすればグローバルナビのフォントをfirefoxで変えられるでしょうか? 申し訳ありませんが未熟者でcss、html、phpはあまりわかっていないのでわかりやすく説明していただけると助かります(初歩の初歩くらいはわかりますが...)。お手数をおかけしますが、どうぞ宜しくお願いします。 ### 補足情報 言語:CSS,PHP,HTML ※別に、webフォントを使わないやり方でサーバーに直接入れられるのであれば、それでも問題ないです。
回答: 【解決案】 補足情報にあります通り自サーバー内で完結させれば解決しそうです。(safariやchromeはhelperが頑張ってくれているのかもしれません) 1. M+ Web Fonts Project 提供ファイル一覧から提供されているfontファイルをダウンロード 2. サーバーのテーマファイルフォルダの任意の場所にアップロード。 3. style.cssなどに追記。 ``` @font-face{ font-family: 'mplus-1p-regular'; src: url('fontデータをアップロードしたフォルダ/mplus-1p-regular.eot'); src: url('fontデータをアップロードしたフォルダ/mplus-1p-regular.eot?#iefix') format('embedded-opentype'), url('fontデータをアップロードしたフォルダ/mplus-1p-regular.woff') format('woff'), url('fontデータをアップロードしたフォルダ/mplus-1p-regular.ttf') format('truetype'); } ``` SSLを使用するなら外部参照する際も全てSSLでないと有効にならないと思います。 style.cssに追記するなら相対パス、head内で読み込むならをつけて絶対パスでアップロードしたfontデータを参照すれば、自サーバSSL内で完結できると思います。