質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • WordPress

    7419questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • CSS

    5997questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Firefox

    213questions

    Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

  • Safari

    170questions

    SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

  • font

    95questions

    近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,773

moiyabi

score 3

前提・実現したいこと

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フォントを使わないやり方でサーバーに直接入れられるのであれば、それでも問題ないです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

【解決案】
補足情報にあります通り自サーバー内で完結させれば解決しそうです。(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内で読み込むなら<?php echo get_template_directory_uri(); ?>をつけて絶対パスでアップロードしたfontデータを参照すれば、自サーバSSL内で完結できると思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/09 01:57 編集

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

    キャンセル

  • 2016/05/09 23:37

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

    キャンセル

  • 2016/05/11 09:13

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

    キャンセル

  • 2016/05/11 14:04 編集

    考えられるのは、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も同じくです。

    キャンセル

  • 2016/05/11 21:36

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

    キャンセル

関連した質問

同じタグがついた質問を見る

  • WordPress

    7419questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • CSS

    5997questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Firefox

    213questions

    Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

  • Safari

    170questions

    SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

  • font

    95questions

    近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。