webフォントおすすめ10パターン [フォレストページ＋] 夢小説対応・簡単オシャレな創作サイト作成サービス

webフォントおすすめ10パターン

ラテ式CSSベース（ver 1.6以降）向けのフォントセットです。コピペでOK。

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;

}

Home