webフォント11パターン
ラテ式CSSベース（ver 1.6以降）向けのフォントセットです。コピペでOK。
（2024/10/15追加）Elegant
Tiny | Plain | Minimal | Round | Thin | Pop | Twinkle | Noble | Chic | Ancient | Elegant
CSS知識のある方向け→「Google Fontsの使い方」
「よくある質問」で回答したとおり、小説本文フォントは変更できません。CSS知識のある方は「よくある質問」を参考にしてカスタマイズしてください。
振り返りがてら最初から順番に説明します。
※「ラテ式CSS拡張版」を利用している方は、拡張版も最新CSSに入れ替える必要があります
【Tiny】プレビュー
［シンプル/かわいい/すっきり/ひかえめ/こじんまり/ふんわり/こてっとした］
見出しフォントが極細なので、淡い配色のテーマだとテキストが読みづらいかも。
シンプルなテーマによく映えます。手書きイラストとも相性良いです。
【Plain】プレビュー
［シンプル/かわいい/落ち着きがある/ほどよいバランス/まるい/洗練された］
小綺麗にまとまっています。どんなテーマにも合わせやすいと思います。
【Minimal】プレビュー
［ミニマル/シンプル/かわいい/モダン/都会/ひかえめ/クール］
直線的・抽象的なデザインと相性が良いと思います。
【Round】プレビュー
［かわいい/まるい/手書き/装飾的/華やか/ぽってり/ころんとした］
手書きの模様や、曲線的なデザインと相性が良いと思います。
【Thin】プレビュー
［手書き/やわらかい/繊細/かわいい/洗練された］
かわいいような、おしゃれでかっこいいような。曲線的なデザインに合わせやすいと思います。
【Pop】プレビュー
［カジュアル/ポップ/かわいい/ふとめ/直線的/元気いっぱい］
ガツンと前に出てくるような、個性的な和文フォントです。はっきりとしたデザインに合うと思います。
【Twinkle】プレビュー
［キラキラ/リッチ/装飾的/華やか/ゴージャス］
個性的な背景画像や、色の数が多いデザインと合うと思います。
【Noble】プレビュー
［シンプル/きれい/洗練された/ひかえめ/落ち着いた］
シンプルなテーマによく合います。
【Chic】プレビュー
［シック/クラシカル/レトロ/ゴージャス/華やか/ふとめ］
柄入りデザインや、レトロ/アンティーク調に合うと思います。和柄にもおすすめ。
【Ancient】プレビュー
［クラシカル/ゴシック/ホラー/ファンタジー/アンティーク/異世界］
上級者向け。合わせるのが難しいと思います。
背景画像が「紙っぽい」質感のテーマには合わせやすいです。
ダーク系テーマにもよく合います。
【Elegant】プレビュー
［シンプル/きれい/洗練された/かわいい/落ち着いた］
フォントセット「Noble」の派生です。Nobleよりもかわいいと思います。（2024/10/15追加）
（2024/10/15追加）Elegant
Menu
Tiny | Plain | Minimal | Round | Thin | Pop | Twinkle | Noble | Chic | Ancient | Elegant
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;
}Elegant
【Elegant】プレビュー
［シンプル/きれい/洗練された/かわいい/落ち着いた］
フォントセット「Noble」の派生です。Nobleよりもかわいいと思います。（2024/10/15追加）
ElegantのCSSを見る
［マイテーマ編集］>［CSSを編集］ページにて、フォームの一番上（一番最初の行）にコピペしてください@import url('https://fonts.googleapis.com/css2?family=Croissant+One&family=Kaisei+Opti:wght@700&family=Josefin+Slab:wght@675&family=Zen+Old+Mincho:wght@600&display=swap');
body{
--logo-alphabet:'Croissant One';
--logo-kanji:'Kaisei Opti';
--sub-alphabet:'Josefin Slab';
--font-base:'Zen Old Mincho',ui-serif,serif;
--ls-h1:.08em;
}
h1 {
--logo-alphabet:'Josefin Slab';
}
h2,h3{
line-height:1.2;
}