ferret Oneでは、エンドユーザーのデバイスに依存しないWebフォントを利用することができます。
ここでは、フォントの設定の仕方について説明します。
目次
・Webフォントとは
・設定方法
・対応フォント
・フォントの太さについて
・高度な設定方法①(要CSS)
・高度な設定方法②(要CSS)
・専用ディレクトリの場合
Webフォントとは
Webブラウザに表示されるフォントは、各端末にインストールされているフォントで文字を表示するようになっています。
端末によってフォントが変わってしまうので、思い通りのフォントにならなかったり、イメージが異なってしまったりする場合があります。
しかし、Webフォントを使うことで、どの端末でも同じフォントで表示できるようになります。
文字による雰囲気や訴求イメージを損なうことなく、ユーザーに届けることが出来ます。
設定方法
<個別で設定する場合>
・見出しパーツ
・テキストパーツ
・リッチテキストパーツ
<サイト全体で設定する場合>
設定 > 外観設定 > テーマ設定 の「テーマカスタマイズ」を選択します。
「共通」からフォントの種類、フォントの太さ(一部)、フォントサイズ、フォント色、行間隔が設定できます。
こちらからWebフォントの種類を選択できます。
※サイト全体でフォントを変更可能ですが、パーツ個別でフォントを設定していた場合、パーツ側のフォントが優先されます。
対応フォント
標準(各端末に依存したデフォルトのフォント)
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フォントも利用可能です。
下記の記述についてはサンプルサイトで確認をしておりますが、サイトに利用している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フォントはご利用いただくことができません。