フォントの変更について

質問一覧Category: UNIVERSEフォントの変更について
Hacesjapanhacesjapan asked 5か月 ago

現状、見出しフォントと本文フォントに使用できるフォントが”ゴシック体”と”明朝体”しかないのですが、”ゴシック体”を”游ゴシック”に替えたいと思っております。
その場合、HTMLのどこをどのように修正すればフォントを変更できるでしょうか。
ご教示いただけたら幸いです。

1 Answers
Best Answer
BaseadminBaseDesignInfo Staff answered 5か月 ago

ご質問ありがとうございます。

「游ゴシック」を使用したいということで、「游ゴシック」をウェブ上で利用するにはどのようなCSSを書いたら良いかを理解されているという前提でアドバイスさせていただきます。

UNIVERSEにはHTML編集をしなくても、設定項目として追加のCSSだけを追加できるようになっています。
適用させたいCSSが決まっていれば、それをデザイン編集画面の一番下「独自CSS」に入力してください。
「独自CSS」は一番最後に適用されますので、フォント設定よりも優先されます。

対象とするHTML要素は、ご自身のショップを表示させた状態でHTMLソースを表示して確認できます。
「.hero h2」に対して指定し「 !important 」をすればおそらく適用されると思います。

よろしくお願いいたします。

Hacesjapanhacesjapan replied 5か月 ago

お返事ありがとうございます。

独自CSSに
Body{
font-family: -apple-system, BlinkMacSystemFont, Roboto, “Segoe UI”, “Helvetica Neue”, HelveticaNeue, “游ゴシック体”, YuGothic, “游ゴシック Medium”, “Yu Gothic Medium”, “游ゴシック”, “Yu Gothic”, Verdana, “メイリオ”, Meiryo, sans-serif;
font-weight: 500;
}
このように入力したのですがヘッダーとフッターにしか効きません。それ以外の部分を変えるにはどのようにすれば良いでしょうか。

BaseadminBaseDesignInfo Staff replied 5か月 ago

bodyだけでは弱いかもしれませんね。サイト全体で細かく指定されていますのでセレクタの個別性を考え、細かいセレクタ名を指定したり、アスタリスク、!importantなど組み合わせてみてはいかがでしょうか。

Hacesjapanhacesjapan replied 5か月 ago

ありがとうございます。
頂いたアドバイスをもとにコード変更したらうまくいきました。
以下、他の方検索した際に参考になるようコードを載せさせていただきます。

body{
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Verdana, "メイリオ", Meiryo, sans-serif !important;
font-weight: 500;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
a {
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Verdana, "メイリオ", Meiryo, sans-serif !important;
font-weight: 400;
}

BaseadminBaseDesignInfo Staff replied 5か月 ago

よかったです。参考情報、ありがとうございます!