Skip to content

Commit 9fcd518

Browse files
aryanpinglearyanpingle
committed
Faster font loading
* Skips the intermediary step while loading a Google Font, and uses the stylesheet directly
1 parent c28d3e1 commit 9fcd518

File tree

3 files changed

+147
-3
lines changed

3 files changed

+147
-3
lines changed

‎dist/index.html

+3
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@
1212
}
1313
</script>
1414

15+
<!-- Preconnect to fonts.gstatic.com -->
16+
<link rel="preconnect" href="fonts.gstatic.com" />
17+
1518
<!-- CSS -->
1619
<link rel="stylesheet" href="./bundle/index.css" />
1720

‎src/fonts.css

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
/*
2+
Petrona
3+
https://fonts.googleapis.com/css2?family=Petrona:ital,wght@0,100..900;1,100..900&display=swap
4+
*/
5+
6+
/* vietnamese */
7+
@font-face {
8+
font-family: "Petrona";
9+
font-style: italic;
10+
font-weight: 100 900;
11+
font-display: swap;
12+
src: url(https://fonts.gstatic.com/s/petrona/v32/mtG44_NXL7bZo9XXgXdouEMV4CU.woff2)
13+
format("woff2");
14+
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
15+
U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
16+
U+0329, U+1EA0-1EF9, U+20AB;
17+
}
18+
/* latin-ext */
19+
@font-face {
20+
font-family: "Petrona";
21+
font-style: italic;
22+
font-weight: 100 900;
23+
font-display: swap;
24+
src: url(https://fonts.gstatic.com/s/petrona/v32/mtG44_NXL7bZo9XXgXdouUMV4CU.woff2)
25+
format("woff2");
26+
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
27+
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
28+
}
29+
/* latin */
30+
@font-face {
31+
font-family: "Petrona";
32+
font-style: italic;
33+
font-weight: 100 900;
34+
font-display: swap;
35+
src: url(https://fonts.gstatic.com/s/petrona/v32/mtG44_NXL7bZo9XXgXdot0MV.woff2)
36+
format("woff2");
37+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
38+
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
39+
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
40+
}
41+
/* latin-ext */
42+
@font-face {
43+
font-family: "Petrona";
44+
font-style: normal;
45+
font-weight: 100 900;
46+
font-display: swap;
47+
src: url(https://fonts.gstatic.com/s/petrona/v32/mtG64_NXL7bZo9XXgXxYtVsR.woff2)
48+
format("woff2");
49+
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
50+
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
51+
}
52+
/* latin */
53+
@font-face {
54+
font-family: "Petrona";
55+
font-style: normal;
56+
font-weight: 100 900;
57+
font-display: swap;
58+
src: url(https://fonts.gstatic.com/s/petrona/v32/mtG64_NXL7bZo9XXgXJYtQ.woff2)
59+
format("woff2");
60+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
61+
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
62+
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
63+
}
64+
65+
/*
66+
Noto Sans Mono
67+
https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&display=swap
68+
*/
69+
70+
/* cyrillic-ext */
71+
@font-face {
72+
font-family: "Noto Sans Mono";
73+
font-style: normal;
74+
font-weight: 100 900;
75+
font-stretch: 100%;
76+
font-display: swap;
77+
src: url(https://fonts.gstatic.com/s/notosansmono/v30/BngcUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZ2d_Cj7dc.woff2)
78+
format("woff2");
79+
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
80+
U+FE2E-FE2F;
81+
}
82+
/* cyrillic */
83+
@font-face {
84+
font-family: "Noto Sans Mono";
85+
font-style: normal;
86+
font-weight: 100 900;
87+
font-stretch: 100%;
88+
font-display: swap;
89+
src: url(https://fonts.gstatic.com/s/notosansmono/v30/BngcUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZ2fvCj7dc.woff2)
90+
format("woff2");
91+
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
92+
}
93+
/* greek-ext */
94+
@font-face {
95+
font-family: "Noto Sans Mono";
96+
font-style: normal;
97+
font-weight: 100 900;
98+
font-stretch: 100%;
99+
font-display: swap;
100+
src: url(https://fonts.gstatic.com/s/notosansmono/v30/BngcUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZ2dvCj7dc.woff2)
101+
format("woff2");
102+
unicode-range: U+1F00-1FFF;
103+
}
104+
/* greek */
105+
@font-face {
106+
font-family: "Noto Sans Mono";
107+
font-style: normal;
108+
font-weight: 100 900;
109+
font-stretch: 100%;
110+
font-display: swap;
111+
src: url(https://fonts.gstatic.com/s/notosansmono/v30/BngcUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZ2efCj7dc.woff2)
112+
format("woff2");
113+
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
114+
U+03A3-03FF;
115+
}
116+
/* latin-ext */
117+
@font-face {
118+
font-family: "Noto Sans Mono";
119+
font-style: normal;
120+
font-weight: 100 900;
121+
font-stretch: 100%;
122+
font-display: swap;
123+
src: url(https://fonts.gstatic.com/s/notosansmono/v30/BngcUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZ2dPCj7dc.woff2)
124+
format("woff2");
125+
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
126+
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
127+
}
128+
/* latin */
129+
@font-face {
130+
font-family: "Noto Sans Mono";
131+
font-style: normal;
132+
font-weight: 100 900;
133+
font-stretch: 100%;
134+
font-display: swap;
135+
src: url(https://fonts.gstatic.com/s/notosansmono/v30/BngcUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZ2evCj.woff2)
136+
format("woff2");
137+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
138+
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
139+
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
140+
}

‎src/index.css

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
@import url("https://fonts.googleapis.com/css2?family=Petrona:ital,wght@0,100..900;1,100..900&display=swap");
2-
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&display=swap");
3-
41
* {
52
box-sizing: border-box;
63
}
@@ -110,6 +107,10 @@ footer {
110107
border-top: 2px solid var(--surface-1-border);
111108
}
112109

110+
b {
111+
font-weight: 700;
112+
}
113+
113114
/* The fancy orb stuff */
114115

115116
.fancy-orb-background {

0 commit comments

Comments
 (0)