Settings
Font Family / Size
/path/to/floncss/settings/fonts.css
サイトで利用する共通のフォントファイミリー、サイズの変数です。
デザインに応じて適宜変更してください。
こちらで定義されている変数は、utility classと連携しています。
1/**
2 * webfontをimportする場合はこちらに記載
3 */
4@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto+Mono:wght@400;700&display=swap");
5
6:root {
7 /**
8 * font-family
9 */
10 /* primary font-family */
11 --font-family-primary:
12 "Noto Sans JP",
13 "游ゴシック体",
14 yugothic,
15 "游ゴシック Medium",
16 "Yu Gothic Medium",
17 "游ゴシック",
18 "Yu Gothic",
19 -apple-system,
20 "BlinkMacSystemFont",
21 "Helvetica Neue",
22 "Hiragino Kaku Gothic ProN",
23 "Hiragino Sans",
24 "Meiryo",
25 sans-serif;
26
27 /* secondary font-family */
28 --font-family-secondary:
29 "Roboto Mono", monospace;
30
31 /**
32 * font-size
33 */
34 /* default font-size */
35 --font-size-default: 16px;
36
37 /** base font-size */
38 --font-size-base: 1rem;
39
40 /** other font-size */
41 --font-size-2xl: 48px;
42 --font-size-xl: 30px;
43 --font-size-lg: 24px;
44 --font-size-md: 20px;
45 --font-size-sm: 14px;
46 --font-size-xs: 12px;
47 --font-size-2xs: 10px;
48}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}