phala-docs/fonts.css at main · Phala-Network/phala-docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
/*
 * Phala v3 — typography for docs.phala.com
 *
 * Mirrors the marketing site (phala.com) v3 font stack:
 *   - ABCArizonaFlare    display headlines (h1, h2)
 *   - ABCDiatype         body, UI, navigation, h3
 *   - SuisseIntlMono     code, eyebrows, status pills
 *
 * FOUT mitigation strategy:
 *   1. font-display: block on the real fonts — hides text up to 3s while
 *      the woff2 loads; eliminates the visible swap from fallback to web
 *      font. On cached navigations the wait is imperceptible.
 *   2. Metric-matched fallback @font-faces (`size-adjust`, `ascent-override`,
 *      etc.) so if the block period does expire to the fallback, the
 *      fallback occupies the same space — no layout shift, no jolt.
 *
 * Metric values are starting estimates from comparable display-serif and
 * humanist-sans pairings. Tune by eye against the live site if anything
 * looks off (the most likely culprit is `size-adjust`).
 */

/* ─── Real webfonts ─────────────────────────────────────────────────── */

@font-face {
  font-family: "ABCArizonaFlare";
  src: url("/fonts/exa/ABCArizonaFlare-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
}

@font-face {
  font-family: "ABCDiatype";
  src: url("/fonts/exa/ABCDiatype-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
}

@font-face {
  font-family: "SuisseIntlMono";
  src: url("/fonts/exa/SuisseIntlMono-Regular-WebTrial.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
}

/* ─── Metric-matched local fallbacks ─────────────────────────────────── */
/*
 * These wrap the system fallback font and adjust its metrics so it occupies
 * the same vertical/horizontal space as the real webfont. When the block
 * period times out (or before the woff2 finishes downloading on a cold
 * connection), the page renders with these — visually nearly identical
 * footprint to the real webfont, so when the swap eventually happens
 * there's no layout shift.
 */

@font-face {
  font-family: "ABCArizonaFlare Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 94%;
  ascent-override: 95%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "ABCDiatype Fallback";
  src: local("Trebuchet MS"), local("Arial");
  size-adjust: 97%;
  ascent-override: 92%;
  descent-override: 23%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "SuisseIntlMono Fallback";
  src: local("SFMono-Regular"), local("Consolas"), local("Menlo"),
    local("Liberation Mono");
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* ─── Font-family stacks ─────────────────────────────────────────────── */

:root {
  --v3-heading: "ABCArizonaFlare", "ABCArizonaFlare Fallback", Georgia, serif;
  --v3-body: "ABCDiatype", "ABCDiatype Fallback", "Trebuchet MS", Arial,
    sans-serif;
  --v3-mono: "SuisseIntlMono", "SuisseIntlMono Fallback", "SFMono-Regular",
    Consolas, monospace;
}

body,
input,
button,
select,
textarea {
  font-family: var(--v3-body);
}

h1,
h2 {
  font-family: var(--v3-heading);
  font-weight: 400;
  letter-spacing: 0;
}

h3,
h4,
h5,
h6 {
  font-family: var(--v3-body);
  font-weight: 600;
  letter-spacing: 0;
}

code,
pre,
kbd,
samp,
.font-mono {
  font-family: var(--v3-mono);
}