ferret Oneでは、エンドユーザーのデバイスに依存しないWebフォントを利用することができます。
ここでは、フォントの設定の仕方について説明します。
目次
Webフォントとは
Webブラウザに表示されるフォントは、各端末にインストールされているフォントで文字を表示するようになっています。
端末によってフォントが変わってしまうので、思い通りのフォントにならなかったり、イメージが異なってしまったりする場合があります。
しかし、Webフォントを使うことで、どの端末でも同じフォントで表示できるようになります。
文字による雰囲気や訴求イメージを損なうことなく、ユーザーに届けることが出来ます。
設定方法
・見出しパーツ
・テキストパーツ
・リッチテキストパーツ
フォントの太さについて
文字の太さを変更することで、見出しやリード文の視認性や訴求力の向上につながります。
ferret Oneでは下記3種類のフォントを用意しておりますが、
フォントによって変更できる太さに限りがありますのでご注意ください。
※フォントによっては、すべての漢字や記号を網羅できない可能性があります。予めご了承ください。
①太さを変更できないフォント
もともとのフォントに太字が存在しないため、太字にできないフォントを指します。
選択したフォント | 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"; |
②太さを変更できるフォント
パーツメニューの「B」ボタンから太字にすることができるフォントを指します。
<見出し、テキストパーツの場合>
<リッチテキストパーツの場合>
選択したフォント | ferret Oneで記述しているCSS |
標準 |
font-family: 'Hiragino Kaku Gothic ProN',Meiryo,'メイリオ',sans-serif; |
ゴシック | font-family: "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "MS Pゴシック", "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」は無効化されますので、ご了承ください。
<太さのパターンについて>
太さはパターン別にアルファベットが決められており、フォント名の後ろに1文字で表記されています。
※フォントによっては下記パターンが全てそろっていないものもございます。
規格を示す アルファベット |
規格名 | 表示例 |
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フォントも利用可能です。
下記の記述についてはサンプルサイトで確認をしておりますが、サイトに利用している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;
}
}
高度な設定方法③(要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フォントはご利用いただくことができません。