サイト全体のフォント指定

Question

いつもお世話になっています。

MacbookをCatalinaにアップデートしたら、chromeのフォントが変わってしまいました。
原因を調べ、標準フォントをヒラギノ角ゴシックに変更したら解決したのですが、
普段全く気にしていなかったフォントの指定をしておいたほうが、
より意図した表示になるのでは、と思いました。

そこで、楽天市場、ヤフーショッピング両方について、
サイト全体をフォント指定する方法があれば教えていただきたいです。

ちなみに指定したいフォントは下記です。
font-family: 'ヒラギノ角ゴシック','メイリオ','ＭＳ Ｐゴシック',sans-serif;

参考：https://note.com/tomosta/n/n41b7038778a6

よろしくお願いいたします。

Accepted Answer

ECマスターズの伊藤です。

> 
> * { font-family: 'ヒラギノ角ゴシック','メイリオ','ＭＳ Ｐゴシック',sans-serif; }
> 
> 
> と記述すれば、自分で作った部分だけフォント指定されるのでしょうか？

CSSには優先度があります。

例えば

===
テキストテキスト


*{color:orange;}
div{color:pink;}

===

となっていた場合、
*{color:orange;}
より
div{color:pink;}
が優先度が高いため、文字色はピンクとなります。

そのため

* { font-family: 'ヒラギノ角ゴシック','メイリオ','ＭＳ Ｐゴシック',sans-serif; }

で指定頂いても、楽天にて

div{sans-serif}

と指定されている場合は、
div{sans-serif}
が適用されるため
上記のタグでは、作成された箇所に
ご希望のフォントを適用していただくことができません。

ご希望のフォントを適用するには、classを指定するなどをして
優先度をあげ、適用して頂く必要がございます。
===
テキストテキスト


.setfont { font-family: 'ヒラギノ角ゴシック','メイリオ','ＭＳ Ｐゴシック',sans-serif; }

===

Answer

ECマスターズの村井です。

休み明けに担当より回答させていただきますので、
今しばらくお待ちいただければと思います。

Answer

ECマスターズの田中です。

フォント指定をサイト全体に適用させる場合は、
セレクタを「*」と指定することで、
ページ内の全要素に対して指定を行うことができます。
下記のような形式になります。

* { font-family: 'ヒラギノ角ゴシック','メイリオ','ＭＳ Ｐゴシック',sans-serif; }

指定をしても変わらない部分は、
すでに個別にフォント指定がされていることが原因ですので、
個別の指定を削除するか、優先度を上回るセレクタにてご指定願います。
https://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666

なお、楽天市場・Yahoo!ショッピング、
各モールにて設置されている要素（ヘッダーなど）は、
モールにて指定したフォントの利用を前提としてレイアウトされており、
無理に上書きすると、かえってレイアウトを崩す場合がございます。

基本的には、みそぼんJrさんにて作成された部分に対して
フォント指定を行っていただきますようお願いいたします。

Answer

田中様

いつもお世話になっています。

＞無理に上書きすると、かえってレイアウトを崩す場合がございます。
＞基本的には、みそぼんJrさんにて作成された部分に対して
＞フォント指定を行っていただきますようお願いいたします。

そのようにしたいのですが、例えばヘッダー等に


* { font-family: 'ヒラギノ角ゴシック','メイリオ','ＭＳ Ｐゴシック',sans-serif; }


と記述すれば、自分で作った部分だけフォント指定されるのでしょうか？

Answer

伊藤様

ありがとうございます。
一括での変更は難しいみたいですね。
iframe内のこともありますし、今回は見送ろうと思います。
また使う機会が出てきたら、思い出して使います。
ありがとうございました。