このセクションの記事

もっと見る

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

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

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

目次

 

Webフォントとは

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

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

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

 

設定方法

・見出しパーツ

____________ferret-One-_______13_.png

・テキストパーツ

____________ferret-One-_______14_.png

・リッチテキストパーツ

____________ferret-One-_______15_.png

 

フォントの太さについて

文字の太さを変更することで、見出しやリード文の視認性や訴求力の向上につながります。
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";

 

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

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

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

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

選択したフォント 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

極細

 ____EL.png
L Light
細		 ____L.png
R Regular
中細		 ____R.png
M Medium
中		 ____M.png

DB

Demi Bold

中太

 ______DB.png
B Bold
太		 ____B.png

EB

 Extra Bold
特太		 _______EB.png

 

＜確認方法＞


・見出しパーツ

_____1_.png

・テキストパーツ

____.png

・リッチテキストパーツ

__________.png

 

選択したフォント

設定可能な

太さのパターン

 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）サイト全体で設定したい場合

設定＞外観設定＞サイトのカスタムCSS

//フォント
$font_family_awsm: "指定のフォント";
$font_feature_settings:"palt" 1;

"指定のフォント"部分に指定のフォントを入力してください。

下記の記述についてはサンプルサイトで確認をしておりますが、サイトに利用している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/

下記の記述についてはサンプルサイトで確認をしておりますが、サイトに利用している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フォントはご利用いただくことができません。

関連記事