wordpressでアップロードしたフォントが反映されない

Question

Wordpressのフォントを独自フォント(san_francisco-webfont.woff)に変更しようとしているのですが、うまく反映されません。

色々サイトを見て試しましたが、どれらも機能しませんでした。
何が原因でしょうか？

File manager

Wordpress - (style.css)

Comments

[Takumiboo]

ブラウザのデベロッパーツールなどで、該当部分のフォント指定はどのようになっていますか？

[trey_0329]

ご協力ありがとうございます。

下記のように表示されていました。

element.style {
}
body {
background: #f9f9f9;
}
body, button, input, optgroup, select, textarea {
color: #626262;
font-size: 15px;
font-family: Open Sans,sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
line-height: 1.7333;

Answer 1

質問文のキャプチャにある指定が
フォントを変える為に書いたcssの全てであるなら
思うに、指定が弱過ぎて元々のcssを上書きできてない
ってとこじゃないでしょうかね

CSSは一番後ろに書いたところで
指定が弱ければ前のCSSを上書きしません

少なくとも

html body *{font-family:"mac";}

ぐらいにはしとかないと
各要素への最低レベルの指定すら上書きできないでしょう

しかしこれでもかなり弱いです

Comments

[trey_0329]

ありがとうございます。
ということは、font familyの設定を最初に書いて、そのあと、オリジナルのcss内のfont familyを、希望のfontに変えれば、フォントも変わりますか？

[KazuhiroHatano]

オリジナルの方の指定を書き換えれば
指定が弱すぎるという問題はクリアすると思います

font-weightの範囲に入ってないかもしれないとか
IEでwoff使えない問題とか
可能性は他にも色々あります

#IE死ね

Answer 2

「独自フォント」がもしMacOSのシステムフォントであれば、ライセンスに問題があります。
指定する方法があるのでそちらを使いましょう。

【CSSの – Appleの新しいサンフランシスコフォントをWebページで使用する方法 - コードログ】
https://codeday.me/jp/qa/20181231/93246.html

【Web ページでも San Francisco が使いたい！ - Glósóli】
http://glosoli.hatenablog.com/entry/2016/03/04/222807

Comments

[trey_0329]

ありがとうございます。
しかし、他のフォントでも、反映されませんでした

[kei344]

適切に読み込めていないか、CSSの記述内に問題があるからでしょう。

Answer 3

style.cssのurlのパスを以下のようにしてはどうでしょうか？

src: url(“css/fonts/フォント名”)

Comments

[trey_0329]

ありがとうございます。
@font-face {
font-family:mac;
src: url("css/fonts/san_francisco-webfont.woff");
font-weight: normal;
}

body {
font-family:mac;
}

とやりましたが、反映されませんでした。

[trey_0329]

ちなみに、style.cssはsiteorigin-corpファイル内に存在し、fontsのファイルは、siteorigin-corp/css/fontsフォルダー内に存在するので、私も、頂いたアドバイスは正しいと思ったのですが、なぜかダメでした。

[madone99]

パス指定が合っていても駄目なんですね。
font-familyの指定の問題でしょうか？

https://qiita.com/raryosu/items/9093660096e3fedfc333

[trey_0329]

試しに全く異なるフォントをダウンロードして、同じようにしてみたのですが、それも反映されませんでした。
これと同じステップでpathだけカスタムしてみたのですが、うまくいきません。。
https://ruka-ch.jp/wordpress-font-change/

[madone99]

font-familyを文字列にしたらどうでしょう？

@font-face {
font-family: "mac";
}

body {
font-family: "mac";
}