フォントを変更する方法

フォントを変更する方法

セルフルの上級者機能に追加された「カスタムCSS」
この機能を利用した裏技をこのブログでは紹介しています🤗

フォントサンプル画像

このように、文字のフォントが変わります。

対応しているサイトデザイン※

全てのデザイン

※サイトデザインとは、セルフルの管理画面左にある「サイト設定」に入った画面の一番上「サイトデザイン」で選択しているデザインのことです。

変更方法

下記のコードをコピーして「上級者設定」の中にある「カスタムCSS」をクリックしたページに貼り付けしてください。

NotoSans(ゴシック体/フォントサンプル画像:上段左)

/* -------- Webフォント(NotoSans) -------- */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;700&display=swap');
#site {
  font-family: 'Noto Sans JP', sans-serif;
}

ZenKakuGothicNew(ゴシック体/フォントサンプル画像:上段右)

/* -------- Webフォント(ZenKakuGothicNew) -------- */

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');
#site {
  font-family: 'Zen Kaku Gothic New', sans-serif;
}

NotoSerif(明朝体/フォントサンプル画像:下段左)

/* -------- Webフォント(NotoSerif) -------- */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;700&display=swap');
#site {
  font-family: 'Noto Serif JP', serif;
}

ShipporiMincho(明朝体/フォントサンプル画像:下段右)

/* -------- Webフォント(ShipporiMincho) -------- */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;800&display=swap');
#site {
  font-family: 'Shippori Mincho', serif;
}

デザインカテゴリの最新記事