このセクションの記事

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

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

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

目次

・Webフォントとは
・設定方法
・対応フォント
・フォントの太さについて
・高度な設定方法①（要CSS）
・高度な設定方法②（要CSS）
・専用ディレクトリの場合

 

Webフォントとは

Webブラウザに表示されるフォントは、各端末にインストールされているフォントで文字を表示するようになっています。

端末によってフォントが変わってしまうので、思い通りのフォントにならなかったり、イメージが異なってしまったりする場合があります。

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

 

設定方法

＜個別で設定する場合＞

・見出しパーツ

____________ferret-One-_______13_.png

・テキストパーツ

____________ferret-One-_______14_.png

・リッチテキストパーツ

____________ferret-One-_______15_.png

 

 

＜サイト全体で設定する場合＞

設定 > 外観設定 > テーマ設定 の「テーマカスタマイズ」を選択します。

___________ferret-One-_____.png

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

____________ferret-One-_____.png

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

____________ferret-One-_______1_.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';
  }
}

 

高度な設定方法②（要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;
  }
}

 

専用ディレクトリの場合

専用ディレクトリの場合は、「証明書自動登録」ではなく、お客様側で保有しているSSL証明書を使用する必要があります。

上記仕様により、ファイル認証タイプのSSL証明書しかお持ちでない場合は、Webフォントはご利用いただくことができません。

関連記事