このセクションの記事

Webフォントの概要について

Avatar
ferret One 管理事務局
  • 更新
フォローする

ferret Oneでは、エンドユーザーのデバイスに依存しないWebフォントを利用することができます。
ここでは、フォントの設定の仕方について説明します。

 

Webフォントとは何か？

Webブラウザに表示されるフォントは、各端末にインストールされているフォントで文字を表示するようになっています。
端末によってフォントが変わってしまうので、思い通りのフォントにならなかったり、イメージが異なってしまったりする場合があります。

しかし、Webフォントを使うことで、どの端末でも同じフォントで表示できるようになります。
文字による雰囲気や訴求イメージを損なうことなく、ユーザーに届けることが出来ます。

 

設定方法

ホーム > サイト編集 > 外観設定 の「テーマカスタマイズ」を選択します。

「共通」からフォントの種類、フォントの太さ（一部）、フォントサイズ、フォント色、行間隔が設定できます。

01.png

 

こちらからWebフォントの種類を選択できます。

02.png

__________2018-04-27_16.38.34.png

対応フォント

標準（各端末に依存したデフォルトのフォント）
Times New Roman
ゴシック
Arial
sans-serif
Georgia
Verdana
helvetica
A1明朝
UD新ゴ
UD新丸ゴ
UD黎ミン
ゴシックMB101
じゅん201
すずむし
はるひ学園
フォーク
リュウミン
解ミン宙
丸フォーク
見出ゴMB31
見出ミンMA31
新ゴ
新丸ゴ
中ゴシックBBB
黎ミン

※フォントによっては、すべての漢字や記号を網羅できない可能性があります。予めご了承ください。

 

フォントの太さについて

文字の太さを変更することで、見出しやリード文の視認性や訴求力の向上につながります。
規格によって、太さを変更できるフォントに限りがありますのでご注意ください。

太さを変更できるフォント

  • UD 新ゴ
  • UD 新ゴ丸
  • UD 黎ミン
  • ゴシックMB101
  • フォーク
  • リュウミン
  • 解ミン宙
  • 丸フォーク
  • 新ゴ
  • 新丸ゴ

太さの種類

  • L :Light 細
  • R : Regular　中細
  • M : Medium 中
  • B : Bold 太
  • EB : Extra bold 特太

 

高度な設定方法（要CSS）

ferret Oneでは、上記の選択できるフォント以外にも下記ページに紹介されているフォントを利用することができます。

https://typesquare.com/ja/fontlist/fontlist

下記の記述についてはサンプルサイトで確認をしておりますが、サイトに利用しているCSSによっては反映されない場合があります。
CSSについての詳細についてはサポート対象外となりますので、ご了承ください。

例）見出しパーツのh3に反映させる方法

※カスタマイズでclass名を指定しています。

.custom_font {
  h3 {
    font-family: '秀英明朝 M';
  }
}

 

高度な設定方法その2（要CSS）

typesquare以外のフォントで外部にフォントファイルがあり、CSSで読み込みが可能なGoogle FontsといったWebフォントも利用可能です。

https://fonts.google.com/

下記の記述についてはサンプルサイトで確認をしておりますが、サイトに利用しているCSSによっては反映されない場合があります。
CSSについての詳細についてはサポート対象外となりますので、ご了承ください。

例）見出しパーツのh3に反映させる方法

※カスタマイズでclass名を指定しています。

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap');

.custom_font {
  h3 {
    font-family: 'Noto Sans JP', sans-serif;
  }
}

関連記事