Settings
Font Family / Size
/path/to/floncss/settings/fonts.css
サイトで利用する共通のフォントファミリー、サイズの変数です。
デザインに応じて適宜変更してください。
こちらで定義されている変数は、utility classと連携しています。
1/**
2 * Web フォントを使用する場合はコメント解除してください。
3 * ※ 外部リクエストはレンダリングブロックやプライバシー（GDPR 等）に
4 * 影響するため、デフォルトでは無効にしています。
5 * <link rel="preconnect"> と併用するか、フォントのセルフホストを推奨します。
6 */
7/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto+Mono:wght@400;700&display=swap'); */
8
9:root {
10 /**
11 * font-family
12 */
13 /* primary font-family */
14 --font-family-primary:
15 'Noto Sans JP', '游ゴシック体', yugothic, '游ゴシック Medium',
16 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', -apple-system,
17 'BlinkMacSystemFont', 'Helvetica Neue', 'Hiragino Kaku Gothic ProN',
18 'Hiragino Sans', 'Meiryo', sans-serif;
19
20 /* secondary font-family */
21 --font-family-secondary: 'Roboto Mono', monospace;
22
23 /**
24 * font-size
25 */
26 /** default font-size */
27 --font-size-base: 16px;
28 --font-size-2xl: 64px;
29 --font-size-xl: 48px;
30 --font-size-lg: 24px;
31 --font-size-md: 20px;
32 --font-size-sm: 14px;
33 --font-size-xs: 12px;
34 --font-size-2xs: 10px;
35}Useage
utility class
1<div class="font:primary font:secondary@lg">font-family</div>
2<div class="font:md font:lg@lg">font-size</div>css
1body {
2 font-family: var(--font-family-primary);
3 font-size: var(--font-size-base);
4}