webフォントおすすめ10パターン
ラテ式CSSベース(ver 1.6以降)向けのフォントセットです。コピペでOK。
Tiny | Plain | Minimal | Round | Thin | Pop | Twinkle | Noble | Chic | Ancient
CSS知識のある方向け→「Google Fontsの使い方」
「よくある質問」で回答したとおり、小説本文フォントは変更できません。CSS知識のある方は「よくある質問」を参考にしてカスタマイズしてください。
振り返りがてら最初から順番に説明します。
※「ラテ式CSS拡張版」を利用している方は、拡張版も最新CSSに入れ替える必要があります
【Tiny】プレビュー
[シンプル/かわいい/すっきり/ひかえめ/こじんまり/ふんわり/こてっとした]
見出しフォントが極細なので、淡い配色のテーマだとテキストが読みづらいかも。
シンプルなテーマによく映えます。手書きイラストとも相性良いです。
【Plain】プレビュー
[シンプル/かわいい/落ち着きがある/ほどよいバランス/まるい/洗練された]
小綺麗にまとまっています。どんなテーマにも合わせやすいと思います。
【Minimal】プレビュー
[ミニマル/シンプル/かわいい/モダン/都会/ひかえめ/クール]
直線的・抽象的なデザインと相性が良いと思います。
【Round】プレビュー
[かわいい/まるい/手書き/装飾的/華やか/ぽってり/ころんとした]
手書きの模様や、曲線的なデザインと相性が良いと思います。
【Thin】プレビュー
[手書き/やわらかい/繊細/かわいい/洗練された]
かわいいような、おしゃれでかっこいいような。曲線的なデザインに合わせやすいと思います。
【Pop】プレビュー
[カジュアル/ポップ/かわいい/ふとめ/直線的/元気いっぱい]
ガツンと前に出てくるような、個性的な和文フォントです。はっきりとしたデザインに合うと思います。
【Twinkle】プレビュー
[キラキラ/リッチ/装飾的/華やか/ゴージャス]
個性的な背景画像や、色の数が多いデザインと合うと思います。
【Noble】プレビュー
[シンプル/きれい/洗練された/ひかえめ/落ち着いた]
シンプルなテーマによく合います。
【Chic】プレビュー
[シック/クラシカル/レトロ/ゴージャス/華やか/ふとめ]
柄入りデザインや、レトロ/アンティーク調に合うと思います。和柄にもおすすめ。
【Ancient】プレビュー
[クラシカル/ゴシック/ホラー/ファンタジー/アンティーク/異世界]
上級者向け。合わせるのが難しいと思います。
背景画像が「紙っぽい」質感のテーマには合わせやすいです。
ダーク系テーマにもよく合います。
Menu
Tiny | Plain | Minimal | Round | Thin | Pop | Twinkle | Noble | Chic | Ancient
CSS知識のある方向け→「Google Fontsの使い方」
注意点
「よくある質問」で回答したとおり、小説本文フォントは変更できません。CSS知識のある方は「よくある質問」を参考にしてカスタマイズしてください。
使い方
振り返りがてら最初から順番に説明します。
- ラテ式CSSベースver 1.6以降を[サイト全体設定]> [共通HEAD]にコピペ
- マイテーマを作る
(参考→マイテーマの作り方)
- [マイテーマ編集]>[CSSを編集]を開く
- ↓下から好きなフォントセットをコピー
- [マイテーマ編集]>[CSSを編集]フォーム内の一番上の行にペースト
- それぞれの機能(マイページや日記など)の[基本設定]>[デザインテーマ着せ替え]で、今回作成したマイテーマを適用する
(参考→デザインを着せ替えるには?)
※「ラテ式CSS拡張版」を利用している方は、拡張版も最新CSSに入れ替える必要があります
Tiny
【Tiny】プレビュー
[シンプル/かわいい/すっきり/ひかえめ/こじんまり/ふんわり/こてっとした]
見出しフォントが極細なので、淡い配色のテーマだとテキストが読みづらいかも。
シンプルなテーマによく映えます。手書きイラストとも相性良いです。
TinyのCSSを見る
[マイテーマ編集]>[CSSを編集]ページにて、フォームの一番上(一番最初の行)にコピペしてください@import url('https://fonts.googleapis.com/css2?family=Vibes&family=Yomogi&family=Cagliostro&display=swap');
body{
--logo-alphabet:'Vibes';
--logo-kanji:'Yomogi',ui-rounded,fantasy;
--sub-alphabet:'Cagliostro';
--size-h1:2.5rem;
--size-header:1.58rem;
--ls-h1:0.2em;
--ls-header:0.2em;
}
h2,h3{
line-height:1.1;
}
Plain
【Plain】プレビュー
[シンプル/かわいい/落ち着きがある/ほどよいバランス/まるい/洗練された]
小綺麗にまとまっています。どんなテーマにも合わせやすいと思います。
PlainのCSSを見る
[マイテーマ編集]>[CSSを編集]ページにて、フォームの一番上(一番最初の行)にコピペしてください@import url('https://fonts.googleapis.com/css2?family=Sofia&family=Kaisei+Decol&family=Jost&display=swap');
body{
--logo-alphabet:'Sofia';
--logo-kanji:'Kaisei Decol',ui-rounded,cursive;
--sub-alphabet:'Jost';
--size-h1:2.5rem;
--ls-h1:normal;
--ls-header:normal;
}
h1.site_title{
max-height:none !important;
line-height:2 !important;
}
h2,h3{
line-height:1.2;
}
Minimal
【Minimal】プレビュー
[ミニマル/シンプル/かわいい/モダン/都会/ひかえめ/クール]
直線的・抽象的なデザインと相性が良いと思います。
MinimalのCSSを見る
[マイテーマ編集]>[CSSを編集]ページにて、フォームの一番上(一番最初の行)にコピペしてください@import url('https://fonts.googleapis.com/css2?family=Silkscreen&family=Stick&family=Jura:wght@700&display=swap');
body{
--logo-alphabet:'Silkscreen';
--logo-kanji:'Stick',ui-monospace,monospace;
--sub-alphabet:'Jura';
}
Round
【Round】プレビュー
[かわいい/まるい/手書き/装飾的/華やか/ぽってり/ころんとした]
手書きの模様や、曲線的なデザインと相性が良いと思います。
RoundのCSSを見る
[マイテーマ編集]>[CSSを編集]ページにて、フォームの一番上(一番最初の行)にコピペしてください@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Zen+Maru+Gothic:wght@700&family=Delius+Swash+Caps&family=Kiwi+Maru&display=swap');
body{
--logo-alphabet:'Pacifico';
--logo-kanji:'Zen Maru Gothic',ui-rounded,cursive;
--sub-alphabet:'Delius Swash Caps';
--font-base:'Kiwi Maru',ui-rounded,system-ui;
--size-h1:2.5rem;
--size-base:1.083rem;
--ls-h1:normal;
--ls-header:normal;
--ls-menu:normal;
--ls-main:.03em;
}
h1.site_title{
max-height:none !important;
line-height:2 !important;
}
h2,h3{
line-height:1.2;
}
Thin
【Thin】プレビュー
[手書き/やわらかい/繊細/かわいい/洗練された]
かわいいような、おしゃれでかっこいいような。曲線的なデザインに合わせやすいと思います。
ThinのCSSを見る
[マイテーマ編集]>[CSSを編集]ページにて、フォームの一番上(一番最初の行)にコピペしてください@import url('https://fonts.googleapis.com/css2?family=Petit+Formal+Script&family=Hina+Mincho&family=Mali:wght@300&family=Zen+Kurenaido&display=swap');
body{
--logo-alphabet:'Petit Formal Script';
--logo-kanji:'Hina Mincho',ui-serif,cursive;
--sub-alphabet:'Mali';
--font-base:'Zen Kurenaido',ui-sans-serif,system-ui;
--size-h1:2.25rem;
--size-base:1.08rem;
--ls-h1:normal;
--ls-header:normal;
--ls-main:.06em;
}
h1.site_title{
max-height:none !important;
line-height:2 !important;
}
h2,h3{
line-height:1.1;
}
Pop
【Pop】プレビュー
[カジュアル/ポップ/かわいい/ふとめ/直線的/元気いっぱい]
ガツンと前に出てくるような、個性的な和文フォントです。はっきりとしたデザインに合うと思います。
PopのCSSを見る
[マイテーマ編集]>[CSSを編集]ページにて、フォームの一番上(一番最初の行)にコピペしてください@import url('https://fonts.googleapis.com/css2?family=Nova+Round&family=Expletus+Sans&family=Stick&display=swap');
body{
--logo-alphabet:'Nova Round';
--logo-kanji:'Stick',ui-rounded,fantasy;
--sub-alphabet:'Expletus Sans';
--font-base:'Stick',system-ui;
--size-h1:2.5rem;
--size-base:1.08rem;
--ls-h1:normal;
--ls-header:normal;
}
Twinkle
【Twinkle】プレビュー
[キラキラ/リッチ/装飾的/華やか/ゴージャス]
個性的な背景画像や、色の数が多いデザインと合うと思います。
TwinkleのCSSを見る
[マイテーマ編集]>[CSSを編集]ページにて、フォームの一番上(一番最初の行)にコピペしてください@import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&family=Kaisei+Decol&family=Modern+Antiqua&display=swap');
body{
--logo-alphabet:'Homemade Apple';
--logo-kanji:'Kaisei Decol',ui-serif,cursive;
--sub-alphabet:'Modern Antiqua';
--font-base:'Kaisei Opti',ui-serif,serif;
--size-h1:2.25rem;
--size-base:1.08rem;
--ls-h1:normal;
--ls-header:normal;
--ls-main:.06em;
}
h1.site_title{
max-height:none !important;
line-height:2 !important;
}
h2,h3{
line-height:1.2;
}
Noble
【Noble】プレビュー
[シンプル/きれい/洗練された/ひかえめ/落ち着いた]
シンプルなテーマによく合います。
NobleのCSSを見る
[マイテーマ編集]>[CSSを編集]ページにて、フォームの一番上(一番最初の行)にコピペしてください@import url('https://fonts.googleapis.com/css2?family=Marcellus+SC&family=Sorts+Mill+Goudy&family=Zen+Old+Mincho&display=swap');
body{
--logo-alphabet:'Marcellus SC';
--sub-alphabet:'Sorts Mill Goudy',cursive;
--font-base:'Zen Old Mincho',ui-serif,serif;
--size-base:1.08rem;
font-feature-settings:'lnum';
}
h1{
--logo-alphabet:'Sorts Mill Goudy';
}
Chic
【Chic】プレビュー
[シック/クラシカル/レトロ/ゴージャス/華やか/ふとめ]
柄入りデザインや、レトロ/アンティーク調に合うと思います。和柄にもおすすめ。
ChicのCSSを見る
[マイテーマ編集]>[CSSを編集]ページにて、フォームの一番上(一番最初の行)にコピペしてください@import url('https://fonts.googleapis.com/css2?family=Meddon&family=Kaisei+HarunoUmi:wght@500&family=Amita&family=Zen+Old+Mincho:wght@600&display=swap');
body{
--logo-alphabet:'Meddon';
--logo-kanji:'Kaisei HarunoUmi',ui-serif,cursive;
--sub-alphabet:'Amita';
--font-base:'Zen Old Mincho',ui-serif,serif;
--size-base:1.08rem;
--ls-h1:normal;
--ls-header:normal;
--ls-menu:.06em;
--ls-main:.06em;
}
h1.site_title{
max-height:none !important;
line-height:2 !important;
}
h2,h3{
line-height:1.1;
}
Ancient
【Ancient】プレビュー
[クラシカル/ゴシック/ホラー/ファンタジー/アンティーク/異世界]
上級者向け。合わせるのが難しいと思います。
背景画像が「紙っぽい」質感のテーマには合わせやすいです。
ダーク系テーマにもよく合います。
AncientのCSSを見る
[マイテーマ編集]>[CSSを編集]ページにて、フォームの一番上(一番最初の行)にコピペしてください@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&family=Hina+Mincho&family=Macondo+Swash+Caps&family=New+Tegomin&display=swap');
body{
--logo-alphabet:'Cinzel Decorative';
--logo-kanji:'Hina Mincho',ui-serif,fantasy;
--sub-alphabet:'Macondo Swash Caps';
--font-base:'New Tegomin',ui-serif,serif;
--size-h1:2.17rem;
--size-base:1.16rem;
--ls-main:normal;
}
h2,h3{
line-height:1.1;
}