Skip to content

Commit a2a5c10

Browse files
fehmerfehmer
authored
impr: optimize font sizes by using woff2 (@fehmer) (#5582)
1 parent d87d1f1 commit a2a5c10

62 files changed

Lines changed: 118 additions & 232 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎frontend/src/styles/fonts.scss‎

Lines changed: 114 additions & 231 deletions
Original file line numberDiff line numberDiff line change
@@ -1,232 +1,115 @@
1-
@font-face {
2-
font-family: "Source Code Pro";
3-
font-style: normal;
4-
font-weight: 400;
5-
font-display: block;
6-
src: url("/webfonts/SourceCodePro-Regular.ttf") format("truetype");
7-
}
8-
9-
@font-face {
10-
font-family: "JetBrains Mono";
11-
font-style: normal;
12-
font-weight: 400;
13-
font-display: block;
14-
src: url("/webfonts/JetBrainsMono-Regular.ttf") format("truetype");
15-
}
16-
17-
@font-face {
18-
font-family: "Montserrat";
19-
font-style: normal;
20-
font-weight: 400;
21-
font-display: block;
22-
src: url("/webfonts/Montserrat-Regular.ttf") format("truetype");
23-
}
24-
25-
@font-face {
26-
font-family: "Roboto";
27-
font-style: normal;
28-
font-weight: 400;
29-
font-display: block;
30-
src: url("/webfonts/Roboto-Regular.ttf") format("truetype");
31-
}
32-
33-
@font-face {
34-
font-family: "Titillium Web";
35-
font-style: normal;
36-
font-weight: 400;
37-
font-display: block;
38-
src: url("/webfonts/TitilliumWeb-Regular.ttf") format("truetype");
39-
}
40-
41-
@font-face {
42-
font-family: "Oxygen";
43-
font-style: normal;
44-
font-weight: 400;
45-
font-display: block;
46-
src: url("/webfonts/Oxygen-Regular.ttf") format("truetype");
47-
}
48-
49-
@font-face {
50-
font-family: "Itim";
51-
font-style: normal;
52-
font-weight: 400;
53-
font-display: block;
54-
src: url("/webfonts/Itim-Regular.ttf") format("truetype");
55-
}
56-
57-
@font-face {
58-
font-family: "Comfortaa";
59-
font-style: normal;
60-
font-weight: 400;
61-
font-display: block;
62-
src: url("/webfonts/Comfortaa-Regular.ttf") format("truetype");
63-
}
64-
65-
@font-face {
66-
font-family: "Coming Soon";
67-
font-style: normal;
68-
font-weight: 400;
69-
font-display: block;
70-
src: url("/webfonts/ComingSoon-Regular.ttf") format("truetype");
71-
}
72-
73-
@font-face {
74-
font-family: "Atkinson Hyperlegible";
75-
font-style: normal;
76-
font-weight: 400;
77-
font-display: block;
78-
src: url("/webfonts/AtkinsonHyperlegible-Regular.ttf") format("truetype");
79-
}
80-
81-
@font-face {
82-
font-family: "Lato";
83-
font-style: normal;
84-
font-weight: 400;
85-
font-display: block;
86-
src: url("/webfonts/Lato-Regular.ttf") format("truetype");
87-
}
88-
89-
@font-face {
90-
font-family: "Lalezar";
91-
font-style: normal;
92-
font-weight: 400;
93-
font-display: block;
94-
src: url("/webfonts/Lalezar-Regular.ttf") format("truetype");
95-
}
96-
97-
@font-face {
98-
font-family: "Noto Naskh Arabic";
99-
font-style: normal;
100-
font-weight: 400;
101-
font-display: block;
102-
src: url("/webfonts/NotoNaskhArabic-Regular.ttf") format("truetype");
103-
}
104-
105-
@font-face {
106-
font-family: "Vazirmatn";
107-
font-style: normal;
108-
font-weight: 400;
109-
font-display: block;
110-
src: url("/webfonts/Vazirmatn-Regular.ttf") format("truetype");
111-
}
112-
113-
@font-face {
114-
font-family: "Ubuntu";
115-
font-style: normal;
116-
font-weight: 400;
117-
font-display: block;
118-
src: url("/webfonts/Ubuntu-Regular.ttf") format("truetype");
119-
}
120-
121-
@font-face {
122-
font-family: "Ubuntu Mono";
123-
font-style: normal;
124-
font-weight: 400;
125-
font-display: block;
126-
src: url("/webfonts/UbuntuMono-Regular.ttf") format("truetype");
127-
}
128-
129-
@font-face {
130-
font-family: "Inconsolata";
131-
font-style: normal;
132-
font-weight: 400;
133-
font-display: block;
134-
src: url("/webfonts/Inconsolata-Regular.ttf") format("truetype");
135-
}
136-
137-
@font-face {
138-
font-family: "IBM Plex Sans";
139-
font-style: normal;
140-
font-weight: 600;
141-
font-display: block;
142-
src: url("/webfonts/IBMPlexSans-SemiBold.ttf") format("truetype");
143-
}
144-
145-
@font-face {
146-
font-family: "Lexend Deca";
147-
font-style: normal;
148-
font-weight: 400;
149-
font-display: block;
150-
src: url("/webfonts/LexendDeca-Regular.ttf") format("truetype");
151-
}
152-
153-
@font-face {
154-
font-family: "Fira Code";
155-
font-style: normal;
156-
font-weight: 400;
157-
font-display: block;
158-
src: url("/webfonts/FiraCode-Regular.ttf") format("truetype");
159-
}
160-
161-
@font-face {
162-
font-family: "Nunito";
163-
font-style: normal;
164-
font-weight: 700;
165-
font-display: block;
166-
src: url("/webfonts/Nunito-Bold.ttf") format("truetype");
167-
}
168-
169-
@font-face {
170-
font-family: "Roboto Mono";
171-
font-style: normal;
172-
font-weight: 400;
173-
font-display: block;
174-
src: url("/webfonts/RobotoMono-Regular.ttf") format("truetype");
175-
}
176-
177-
@font-face {
178-
font-family: "Boon";
179-
font-style: normal;
180-
font-weight: 400;
181-
font-display: block;
182-
src: url("/webfonts/Boon-400.ttf") format("truetype"),
183-
url("/webfonts/Boon-400.otf") format("opentype");
184-
}
185-
186-
@font-face {
187-
font-family: "Open Dyslexic";
188-
font-style: normal;
189-
font-weight: 400;
190-
font-display: block;
191-
src: url("/webfonts/OpenDyslexic.otf") format("opentype");
192-
}
193-
194-
@font-face {
195-
font-family: "Cascadia Mono";
196-
font-style: normal;
197-
font-weight: 400;
198-
font-display: block;
199-
src: url("/webfonts/CascadiaMono-Regular.ttf") format("truetype");
200-
}
201-
202-
@font-face {
203-
font-family: "IBM Plex Mono";
204-
font-style: normal;
205-
font-weight: 400;
206-
font-display: block;
207-
src: url("/webfonts/IBMPlexMono-Regular.ttf") format("truetype");
208-
}
209-
210-
@font-face {
211-
font-family: "Overpass Mono";
212-
font-style: normal;
213-
font-weight: 400;
214-
font-display: block;
215-
src: url("/webfonts/OverpassMono-VariableFont_wght.ttf") format("truetype");
216-
}
217-
218-
@font-face {
219-
font-family: "Hack";
220-
font-style: normal;
221-
font-weight: 400;
222-
font-display: block;
223-
src: url("/webfonts/HackNerdFont-Regular.ttf") format("truetype");
224-
}
225-
226-
@font-face {
227-
font-family: "CommitMono";
228-
font-style: normal;
229-
font-weight: 400;
230-
font-display: block;
231-
src: url("/webfonts/CommitMono-400-Regular.otf") format("opentype");
1+
@use "sass:map";
2+
$fonts: (
3+
"Source Code Pro": (
4+
"src": "SourceCodePro-Regular",
5+
),
6+
"JetBrains Mono": (
7+
"src": "JetBrainsMono-Regular",
8+
),
9+
"Montserrat": (
10+
"src": "Montserrat-Regular",
11+
),
12+
"Roboto": (
13+
"src": "Roboto-Regular",
14+
),
15+
"Titillium Web": (
16+
"src": "TitilliumWeb-Regular",
17+
),
18+
"Oxygen": (
19+
"src": "Oxygen-Regular",
20+
),
21+
"Itim": (
22+
"src": "Itim-Regular",
23+
),
24+
"Comfortaa": (
25+
"src": "Comfortaa-Regular",
26+
),
27+
"Coming Soon": (
28+
"src": "ComingSoon-Regular",
29+
),
30+
"Atkinson Hyperlegible": (
31+
"src": "AtkinsonHyperlegible-Regular",
32+
),
33+
"Lato": (
34+
"src": "Lato-Regular",
35+
),
36+
"Lalezar": (
37+
"src": "Lalezar-Regular",
38+
),
39+
"Noto Naskh Arabic": (
40+
"src": "NotoNaskhArabic-Regular",
41+
),
42+
"Vazirmatn": (
43+
"src": "Vazirmatn-Regular",
44+
),
45+
"Ubuntu": (
46+
"src": "Ubuntu-Regular",
47+
),
48+
"Ubuntu Mono": (
49+
"src": "UbuntuMono-Regular",
50+
),
51+
"Inconsolata": (
52+
"src": "Inconsolata-Regular",
53+
),
54+
"IBM Plex Sans": (
55+
"src": "IBMPlexSans-SemiBold",
56+
"weight": 600,
57+
),
58+
"Lexend Deca": (
59+
"src": "LexendDeca-Regular",
60+
),
61+
"Fira Code": (
62+
"src": "FiraCode-Regular",
63+
),
64+
"Nunito": (
65+
"src": "Nunito-Bold",
66+
"weight": 700,
67+
),
68+
"Roboto Mono": (
69+
"src": "RobotoMono-Regular",
70+
),
71+
"Boon": (
72+
"src": "Boon-Regular",
73+
),
74+
"Open Dyslexic": (
75+
"src": "OpenDyslexic-Regular",
76+
),
77+
"Cascadia Mono": (
78+
"src": "CascadiaMono-Regular",
79+
),
80+
"IBM Plex Mono": (
81+
"src": "IBMPlexMono-Regular",
82+
),
83+
"Overpass Mono": (
84+
"src": "OverpassMono-Regular",
85+
),
86+
"Hack": (
87+
"src": "Hack-Regular",
88+
),
89+
"Commit Mono": (
90+
"src": "CommitMono-Regular",
91+
),
92+
"Mononoki": (
93+
"src": "Mononoki-Regular",
94+
),
95+
);
96+
97+
$font-defauls: (
98+
"style": normal,
99+
"weight": 400,
100+
"display": block,
101+
"format": "woff2",
102+
"ext": "woff2",
103+
);
104+
105+
@each $font, $settings in $fonts {
106+
$config: map-merge($font-defauls, $settings);
107+
$src: "/webfonts/" + map-get($config, "src") + "." + map-get($config, "ext");
108+
@font-face {
109+
font-family: $font;
110+
font-style: map-get($config, "style");
111+
font-weight: map-get($config, "weight");
112+
font-display: map-get($config, "display");
113+
src: url($src) format(map-get($config, "format"));
114+
}
232115
}

‎frontend/static/fonts/_list.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,5 +93,8 @@
9393
},
9494
{
9595
"name": "CommitMono"
96+
},
97+
{
98+
"name": "Mononoki"
9699
}
97-
]
100+
]

‎frontend/static/webfonts/AtkinsonHyperlegible-Regular.ttf‎

-52.3 KB
Binary file not shown.

‎frontend/static/webfonts/AtkinsonHyperlegible-Regular.woff2‎

22.7 KB
Binary file not shown.

‎frontend/static/webfonts/Boon-400.otf‎

-127 KB
Binary file not shown.

‎frontend/static/webfonts/Boon-400.ttf‎

-206 KB
Binary file not shown.

‎frontend/static/webfonts/Boon-Regular.woff2‎

51 KB
Binary file not shown.

‎frontend/static/webfonts/CascadiaMono-Regular.ttf‎

-610 KB
Binary file not shown.

‎frontend/static/webfonts/CascadiaMono-Regular.woff2‎

206 KB
Binary file not shown.

‎frontend/static/webfonts/Comfortaa-Regular.ttf‎

-109 KB
Binary file not shown.

0 commit comments

Comments
 (0)