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

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

Webフォントとは

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

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

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

設定方法

・見出しパーツ

・テキストパーツ

・リッチテキストパーツ

フォントの太さについて

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

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

①太さを変更できないフォント

もともとのフォントに太字が存在しないため、太字にできないフォントを指します。

選択したフォント	ferret Oneで記述しているCSS
A1明朝	font-family: A1明朝, "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
じゅん201	font-family: "じゅん 201", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
すずむし	font-family: すずむし, "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
はるひ学園	font-family: 'はるひ学園','Lucida Grande','segoe UI','Hiragino Kaku Gothic ProN',Meiryo,Verdana,Arial,'sans-serif';
見出ゴMB31	font-family: 見出ゴMB31, "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
見出ミンMA31	font-family: 見出ミンMA31, "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
中ゴシックBBB	font-family: 中ゴシックBBB, "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";

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

パーツメニューの「Ｂ」ボタンから太字にすることができるフォントを指します。

＜見出し、テキストパーツの場合＞

＜リッチテキストパーツの場合＞

選択したフォント	ferret Oneで記述しているCSS
標準	font-family: 'Hiragino Kaku Gothic ProN',Meiryo,'メイリオ',sans-serif; ※サイトにより異なる場合もございます
ゴシック	font-family: "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳＰゴシック", "MS P Gothic", sans-serif, websafe;
Times New Roman	font-family: 'Times New Roman','Lucida Grande','segoe UI','Hiragino Kaku Gothic ProN',Meiryo,Verdana,Arial,'sans-serif';
Arial	font-family: Arial,'Lucida Grande','segoe UI','Hiragino Kaku Gothic ProN',Meiryo,Verdana,Arial,'sans-serif';
sans-serif	font-family: 'sans-serif','Lucida Grande','segoe UI','Hiragino Kaku Gothic ProN',Meiryo,Verdana,Arial,'sans-serif';
Georgia	font-family: Georgia,'Lucida Grande','segoe UI','Hiragino Kaku Gothic ProN',Meiryo,Verdana,Arial,'sans-serif';
Verdana	font-family: Verdana,'Lucida Grande','segoe UI','Hiragino Kaku Gothic ProN',Meiryo,Verdana,Arial,'sans-serif';
helvetica	font-family: helvetica,'Lucida Grande','segoe UI','Hiragino Kaku Gothic ProN',Meiryo,Verdana,Arial,'sans-serif';

③決められた規格の太さを持つフォント

一部のフォントには、あらかじめ決められた規格の太字フォントが用意されています。
※当該フォントを利用する場合、上記②のようなパーツメニューの太字「B」は無効化されますので、ご了承ください。

＜太さのパターンについて＞
太さはパターン別にアルファベットが決められており、フォント名の後ろに１文字で表記されています。
※フォントによっては下記パターンが全てそろっていないものもございます。

規格を示すアルファベット	規格名	表示例
EL	Extra Light 極細
L	Light 細
R	Regular 中細
M	Medium 中
DB	Demi Bold 中太
B	Bold 太
EB	Extra Bold 特太

＜確認方法＞

・見出しパーツ

・テキストパーツ

・リッチテキストパーツ

選択したフォント	設定可能な太さのパターン	ferret Oneで記述しているCSS
UD新ゴ	L	font-family: "UD新ゴ L", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	R	font-family: "UD新ゴ R", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	M	font-family: "UD新ゴ M", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	B	font-family: "UD新ゴ B", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
UD新丸ゴ	L	font-family: "UD新丸ゴ L", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	R	font-family: "UD新丸ゴ R", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	M	font-family: "UD新丸ゴ M", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	B	font-family: "UD新丸ゴ B", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
UD黎ミン	L	font-family: "UD黎ミン L", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	R	font-family: "UD黎ミン R", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	M	font-family: "UD黎ミン M", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	B	font-family: "UD黎ミン B", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
ゴシックMB101	L	font-family: "ゴシックMB101 L", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	R	font-family: "ゴシックMB101 R", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	M	font-family: "ゴシックMB101 M", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	B	font-family: "ゴシックMB101 B", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	DB	font-family: "ゴシックMB101 DB", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
フォーク	R	font-family: "フォーク R", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	M	font-family: "フォーク M", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	B	font-family: "フォーク B", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
リュウミン	R-KL	font-family: "リュウミン R-KL", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	M-KL	font-family: "リュウミン M-KL", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif"
	B-KL	font-family: "リュウミン B-KL", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	EB-KL	font-family: "リュウミン EB-KL", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
解ミン宙	R	font-family: "解ミン宙 R", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	M	font-family: "解ミン宙 M", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	B	font-family: "解ミン宙 B", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
丸フォーク	R	font-family: "丸フォーク R", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	M	font-family: "丸フォーク M", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	B	font-family: "丸フォーク B", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
新ゴ	EL	font-family: "新ゴ EL", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	L	font-family: "新ゴ L", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	R	font-family: "新ゴ R", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	M	font-family: "新ゴ M", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	B	font-family: "新ゴ B", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
新丸ゴ	L	font-family: "新丸ゴ L", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	R	font-family: "新丸ゴ R", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	M	font-family: "新丸ゴ M", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	B	font-family: "新丸ゴ B", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
黎ミン	R	font-family: "黎ミン R", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	M	font-family: "黎ミン M", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";
	B	font-family: "黎ミン B", "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, "sans-serif";

サイト全体で設定したい場合

2023年4月以降にご契約のお客様は、ベースデザイン設定でも変更が可能です。（種類の制限あり）

サイト全体でフォントを変更可能ですが、パーツ個別でフォントを設定していた場合、パーツ側のフォントが優先されます。

2023年3月までにご契約のお客様はCSSで設定する必要がございます。

CSSについての詳細についてはサポート対象外となりますので、ご了承ください。

高度な設定方法①（要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/

例）見出しパーツの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;
  }
}

高度な設定方法③（要CSS）

※設定 > 外観設定 > サイトのカスタムCSS 内に記述します。

デザインパーツが利用できるサイト

#__next {
--fo-heading-font-family: "Hiragino Kaku Gothic ProN", Meiryo, メイリオ, sans-serif;
--fo-text-font-family: "Hiragino Kaku Gothic ProN", Meiryo, メイリオ, sans-serif;
}

デザインパーツが利用できないサイト

$font_family: 'Noto Sans JP', sans-serif;

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

ディレクトリ配下で運用されている場合

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

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

このセクションの記事

目次

Webフォントとは

設定方法

フォントの太さについて

①太さを変更できないフォント

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

③決められた規格の太さを持つフォント

一部のフォントには、あらかじめ決められた規格の太字フォントが用意されています。
※当該フォントを利用する場合、上記②のようなパーツメニューの太字「B」は無効化されますので、ご了承ください。

＜太さのパターンについて＞
太さはパターン別にアルファベットが決められており、フォント名の後ろに１文字で表記されています。
※フォントによっては下記パターンが全てそろっていないものもございます。

＜確認方法＞

・見出しパーツ

・テキストパーツ

サイト全体で設定したい場合

高度な設定方法①（要CSS）

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

高度な設定方法②（要CSS）

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

高度な設定方法③（要CSS）

デザインパーツが利用できるサイト

デザインパーツが利用できないサイト

ディレクトリ配下で運用されている場合

このセクションの記事

目次

Webフォントとは

設定方法

フォントの太さについて

①太さを変更できないフォント

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

③決められた規格の太さを持つフォント

一部のフォントには、あらかじめ決められた規格の太字フォントが用意されています。※当該フォントを利用する場合、上記②のようなパーツメニューの太字「B」は無効化されますので、ご了承ください。

＜太さのパターンについて＞太さはパターン別にアルファベットが決められており、フォント名の後ろに１文字で表記されています。※フォントによっては下記パターンが全てそろっていないものもございます。

＜確認方法＞

・見出しパーツ

・テキストパーツ

サイト全体で設定したい場合

高度な設定方法①（要CSS）

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

高度な設定方法②（要CSS）

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

高度な設定方法③（要CSS）

デザインパーツが利用できるサイト

デザインパーツが利用できないサイト

ディレクトリ配下で運用されている場合

一部のフォントには、あらかじめ決められた規格の太字フォントが用意されています。
※当該フォントを利用する場合、上記②のようなパーツメニューの太字「B」は無効化されますので、ご了承ください。

＜太さのパターンについて＞
太さはパターン別にアルファベットが決められており、フォント名の後ろに１文字で表記されています。
※フォントによっては下記パターンが全てそろっていないものもございます。