ウェブサイトで特定のフォントを使いたいがうまく表示されない

CSSの記述で特定のフォントを使う場合、この記述であっていますでしょうか？（静的ページ）
またWordpressのtwentyseventeenというテーマでもフォントを変更したいのですが
同じ記述でいいでしょうか？
試しているのですが、静的ページとWordpressで微妙にフォントが違う気がするのです。

Chromeの検証機能でfont-family:M2bなどのチェックを付けたり外したりしていますが変わりません。

フォント名の記述は間違っていません。

「フォント」

<HTML> ```ここに言語を入力 <header> <p>あいうえおかきくけこ</p> </header> <section> <p>なにぬねのはひふへほ</p> </section>

<CSS>
```ここに言語を入力
@font-face {
   font-family:M2b;
   src: url(../fonts/mplus-2p-bold.woff) format('woff');
 }
 
@font-face {
   font-family:M2p;
   src: url(../fonts/mplus-2p-regular.woff) format('woff');
 }
body {
	color:#000;
	margin: 0;
	font-family: M2p;
}

header p {
       font-family: M2b;
}

フォントのリンク先は間違っていません。

yoshinavi

2018/07/13 04:49

そのフォントに「woff」は入っているのでしょうか？

yoshinavi

2018/07/13 04:59

「＞静的ページとWordpressで微妙にフォントが違う気がするのです。」→ChromeやFirefoxのデベロッパーツール等で、適用されているフォントの確認をされてはどうでしょうか？

退会済みユーザー

2018/07/13 05:07 編集

ありがとうございます。フォントは入っていますし、検証ツールで見ていますが、静的ページではちゃんとフォントが設定されているようです。wordpressのほうは私が指定したフォントは打ち消し線で使えない？ようになっていてそのかわりにfont-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;これが指定されてしまっています、

yoshinavi

2018/07/13 05:11

であれば、適用フォントがそれぞれが違うので、適用されているCSSも変わっているはずです。「子テーマ」は作成されていますか？

退会済みユーザー

2018/07/13 05:12

子テーマは作っています。質問文にあるCSSは子テーマです。

yoshinavi

2018/07/13 05:30

優先度が他のプラグイン等で低い可能性がありますので、「!important」をつけてみてはどうでしょうか？

退会済みユーザー

2018/07/13 06:25

ありがとうございます。!importantつけたらうまくいきました。親テーマのCSSを適用させないようにするためには!importantをつけたらいいのでしょうか？

yoshinavi

2018/07/13 06:39

「!important」は優先度を上げる簡単な手段ですが、簡単なゆえに、あちこちで乱用すると収拾がつかなくなる可能性も充分ありますので、「最後の手段」と考えるとよいです。CSSの優先度を上げるには「詳細度」がありますので、どのようなものか一度検索される事をオススメします。そこが理解出来れば、wordpressと静的ページでのCSSの優先度を確認されると、より理解が深まると思います。

退会済みユーザー

2018/07/13 06:41

ありがとうございます。検索してみます。親テーマのCSSを子テーマで!importantをつけずに編集する事も可能って認識でいいでしょうか？

yoshinavi

2018/07/13 06:45

可能です。と言うか、本来はそのための「子テーマ」ではあります。もう一度、子テーマ作成・確認を見直されると良いかと思います。

退会済みユーザー

2018/07/13 06:48

ありがとうございます。只今検索して調べています。

yoshinavi

2018/07/13 06:51

各種スクリプト等の中には、スタイルを書き換えるモノもありますので、通常で変更にならない場合、どのスタイルやスクリプトが適用されているかを知れば、対策も取れると思いますので頑張ってください。