-
Notifications
You must be signed in to change notification settings - Fork 14
/
list.html
464 lines (433 loc) · 30.1 KB
/
list.html
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font List</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">
<link rel="stylesheet" href="serve/agave.css">
<link rel="stylesheet" href="serve/anonymous-pro.css">
<link rel="stylesheet" href="serve/cascadia-code.css">
<link rel="stylesheet" href="serve/fira-code.css">
<link rel="stylesheet" href="serve/fira-sans.css">
<link rel="stylesheet" href="serve/hack.css">
<link rel="stylesheet" href="serve/hk-grotesk.css">
<link rel="stylesheet" href="serve/ibm-plex-mono.css">
<link rel="stylesheet" href="serve/ibm-plex-sans.css">
<link rel="stylesheet" href="serve/ibm-plex-serif.css">
<link rel="stylesheet" href="serve/inter.css">
<link rel="stylesheet" href="serve/jetbrains-mono.css">
<link rel="stylesheet" href="serve/lato.css">
<link rel="stylesheet" href="serve/liberation-mono.css">
<link rel="stylesheet" href="serve/liberation-sans.css">
<link rel="stylesheet" href="serve/liberation-serif.css">
<link rel="stylesheet" href="serve/manrope.css">
<link rel="stylesheet" href="serve/merriweather.css">
<link rel="stylesheet" href="serve/metropolis.css">
<link rel="stylesheet" href="serve/mononoki.css">
<link rel="stylesheet" href="serve/nevermind.css">
<link rel="stylesheet" href="serve/open-sans.css">
<link rel="stylesheet" href="serve/plus-jakarta-display.css">
<link rel="stylesheet" href="serve/plus-jakarta-text.css">
<link rel="stylesheet" href="serve/prodigy-sans.css">
<link rel="stylesheet" href="serve/roboto.css">
<link rel="stylesheet" href="serve/roboto-condensed.css">
<link rel="stylesheet" href="serve/roboto-mono.css">
<link rel="stylesheet" href="serve/roboto-slab.css">
<link rel="stylesheet" href="serve/source-code-pro.css">
<link rel="stylesheet" href="serve/space-mono.css">
<style>
li {
font-size: 1.5rem;
}
</style>
</head>
<body>
<header>
<h1>Font List</h1>
<span>All fonts, weights, and styles</span>
</header>
<h2>Agave</h2>
<ul>
<li style="font-family: Agave; font-weight: 400;">Normal 400</li>
</ul>
<h2>Anonymous Pro</h2>
<ul>
<li style="font-family: 'Anonymous Pro'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'Anonymous Pro'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'Anonymous Pro'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'Anonymous Pro'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
</ul>
<h2>Cascadia Code</h2>
<ul>
<li style="font-family: 'Cascadia Code'; font-weight: 400;">Normal 400</li>
</ul>
<h2>Fira Code</h2>
<ul>
<li style="font-family: 'Fira Code'; font-weight: 300;">Light 300</li>
<li style="font-family: 'Fira Code'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'Fira Code'; font-weight: 500;">Medium 500</li>
<li style="font-family: 'Fira Code'; font-weight: 700;">Bold 700</li>
</ul>
<h2>Fira Sans</h2>
<ul>
<li style="font-family: 'Fira Sans'; font-weight: 100;">Thin 100</li>
<li style="font-family: 'Fira Sans'; font-weight: 100; font-style: italic;">Thin Italic 100</li>
<li style="font-family: 'Fira Sans'; font-weight: 200;">Extra Light 200</li>
<li style="font-family: 'Fira Sans'; font-weight: 200; font-style: italic;">Extra Light 200</li>
<li style="font-family: 'Fira Sans'; font-weight: 300;">Light 300</li>
<li style="font-family: 'Fira Sans'; font-weight: 300; font-style: italic;">Light Italic 300</li>
<li style="font-family: 'Fira Sans'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'Fira Sans'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'Fira Sans'; font-weight: 500;">Medium 500</li>
<li style="font-family: 'Fira Sans'; font-weight: 500; font-style: italic;">Medium Italic 500</li>
<li style="font-family: 'Fira Sans'; font-weight: 600;">Semibold 600</li>
<li style="font-family: 'Fira Sans'; font-weight: 600; font-style: italic;">Semibold 600</li>
<li style="font-family: 'Fira Sans'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'Fira Sans'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
<li style="font-family: 'Fira Sans'; font-weight: 800;">Extra Bold 800</li>
<li style="font-family: 'Fira Sans'; font-weight: 800; font-style: italic;">Extra Bold Italic 800</li>
<li style="font-family: 'Fira Sans'; font-weight: 900;">Black 900</li>
<li style="font-family: 'Fira Sans'; font-weight: 900; font-style: italic;">Black Italic 900</li>
</ul>
<h2>Hack</h2>
<ul>
<li style="font-family: 'Hack'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'Hack'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'Hack'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'Hack'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
</ul>
<h2>HK Grotesk</h2>
<ul>
<li style="font-family: 'HK Grotesk'; font-weight: 100;">Thin 100</li>
<li style="font-family: 'HK Grotesk'; font-weight: 100; font-style: italic;">Thin Italic 100</li>
<li style="font-family: 'HK Grotesk'; font-weight: 200;">Extra Light 200</li>
<li style="font-family: 'HK Grotesk'; font-weight: 200; font-style: italic;">Extra Light 200</li>
<li style="font-family: 'HK Grotesk'; font-weight: 300;">Light 300</li>
<li style="font-family: 'HK Grotesk'; font-weight: 300; font-style: italic;">Light Italic 300</li>
<li style="font-family: 'HK Grotesk'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'HK Grotesk'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'HK Grotesk'; font-weight: 500;">Medium 500</li>
<li style="font-family: 'HK Grotesk'; font-weight: 500; font-style: italic;">Medium Italic 500</li>
<li style="font-family: 'HK Grotesk'; font-weight: 600;">Semibold 600</li>
<li style="font-family: 'HK Grotesk'; font-weight: 600; font-style: italic;">Semibold 600</li>
<li style="font-family: 'HK Grotesk'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'HK Grotesk'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
<li style="font-family: 'HK Grotesk'; font-weight: 800;">Extra Bold 800</li>
<li style="font-family: 'HK Grotesk'; font-weight: 900;">Black 900</li>
</ul>
<h2>IBM Plex Mono</h2>
<ul>
<li style="font-family: 'IBM Plex Mono'; font-weight: 100;">Thin 100</li>
<li style="font-family: 'IBM Plex Mono'; font-weight: 100; font-style: italic;">Thin Italic 100</li>
<li style="font-family: 'IBM Plex Mono'; font-weight: 200;">Extra Light 200</li>
<li style="font-family: 'IBM Plex Mono'; font-weight: 200; font-style: italic;">Extra Light 200</li>
<li style="font-family: 'IBM Plex Mono'; font-weight: 300;">Light 300</li>
<li style="font-family: 'IBM Plex Mono'; font-weight: 300; font-style: italic;">Light Italic 300</li>
<li style="font-family: 'IBM Plex Mono'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'IBM Plex Mono'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'IBM Plex Mono'; font-weight: 500;">Medium 500</li>
<li style="font-family: 'IBM Plex Mono'; font-weight: 500; font-style: italic;">Medium Italic 500</li>
<li style="font-family: 'IBM Plex Mono'; font-weight: 600;">Semibold 600</li>
<li style="font-family: 'IBM Plex Mono'; font-weight: 600; font-style: italic;">Semibold 600</li>
<li style="font-family: 'IBM Plex Mono'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'IBM Plex Mono'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
</ul>
<h2>IBM Plex Sans</h2>
<ul>
<li style="font-family: 'IBM Plex Sans'; font-weight: 100;">Thin 100</li>
<li style="font-family: 'IBM Plex Sans'; font-weight: 100; font-style: italic;">Thin Italic 100</li>
<li style="font-family: 'IBM Plex Sans'; font-weight: 200;">Extra Light 200</li>
<li style="font-family: 'IBM Plex Sans'; font-weight: 200; font-style: italic;">Extra Light 200</li>
<li style="font-family: 'IBM Plex Sans'; font-weight: 300;">Light 300</li>
<li style="font-family: 'IBM Plex Sans'; font-weight: 300; font-style: italic;">Light Italic 300</li>
<li style="font-family: 'IBM Plex Sans'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'IBM Plex Sans'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'IBM Plex Sans'; font-weight: 500;">Medium 500</li>
<li style="font-family: 'IBM Plex Sans'; font-weight: 500; font-style: italic;">Medium Italic 500</li>
<li style="font-family: 'IBM Plex Sans'; font-weight: 600;">Semibold 600</li>
<li style="font-family: 'IBM Plex Sans'; font-weight: 600; font-style: italic;">Semibold 600</li>
<li style="font-family: 'IBM Plex Sans'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'IBM Plex Sans'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
</ul>
<h2>IBM Plex Serif</h2>
<ul>
<li style="font-family: 'IBM Plex Serif'; font-weight: 100;">Thin 100</li>
<li style="font-family: 'IBM Plex Serif'; font-weight: 100; font-style: italic;">Thin Italic 100</li>
<li style="font-family: 'IBM Plex Serif'; font-weight: 200;">Extra Light 200</li>
<li style="font-family: 'IBM Plex Serif'; font-weight: 200; font-style: italic;">Extra Light 200</li>
<li style="font-family: 'IBM Plex Serif'; font-weight: 300;">Light 300</li>
<li style="font-family: 'IBM Plex Serif'; font-weight: 300; font-style: italic;">Light Italic 300</li>
<li style="font-family: 'IBM Plex Serif'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'IBM Plex Serif'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'IBM Plex Serif'; font-weight: 500;">Medium 500</li>
<li style="font-family: 'IBM Plex Serif'; font-weight: 500; font-style: italic;">Medium Italic 500</li>
<li style="font-family: 'IBM Plex Serif'; font-weight: 600;">Semibold 600</li>
<li style="font-family: 'IBM Plex Serif'; font-weight: 600; font-style: italic;">Semibold 600</li>
<li style="font-family: 'IBM Plex Serif'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'IBM Plex Serif'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
</ul>
<h2>Inter</h2>
<ul>
<li style="font-family: 'Inter'; font-weight: 100;">Thin 100</li>
<li style="font-family: 'Inter'; font-weight: 100; font-style: italic;">Thin Italic 100</li>
<li style="font-family: 'Inter'; font-weight: 200;">Extra Light 200</li>
<li style="font-family: 'Inter'; font-weight: 200; font-style: italic;">Extra Light 200</li>
<li style="font-family: 'Inter'; font-weight: 300;">Light 300</li>
<li style="font-family: 'Inter'; font-weight: 300; font-style: italic;">Light Italic 300</li>
<li style="font-family: 'Inter'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'Inter'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'Inter'; font-weight: 500;">Medium 500</li>
<li style="font-family: 'Inter'; font-weight: 500; font-style: italic;">Medium Italic 500</li>
<li style="font-family: 'Inter'; font-weight: 600;">Semibold 600</li>
<li style="font-family: 'Inter'; font-weight: 600; font-style: italic;">Semibold 600</li>
<li style="font-family: 'Inter'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'Inter'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
<li style="font-family: 'Inter'; font-weight: 800;">Extra Bold 800</li>
<li style="font-family: 'Inter'; font-weight: 800; font-style: italic;">Extra Bold Italic 800</li>
<li style="font-family: 'Inter'; font-weight: 900;">Black 900</li>
<li style="font-family: 'Inter'; font-weight: 900; font-style: italic;">Black Italic 900</li>
</ul>
<h2>JetBrains Mono</h2>
<ul>
<li style="font-family: 'JetBrains Mono'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'JetBrains Mono'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'JetBrains Mono'; font-weight: 500;">Medium 500</li>
<li style="font-family: 'JetBrains Mono'; font-weight: 500; font-style: italic;">Medium Italic 500</li>
<li style="font-family: 'JetBrains Mono'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'JetBrains Mono'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
<li style="font-family: 'JetBrains Mono'; font-weight: 800;">Extra Bold 800</li>
<li style="font-family: 'JetBrains Mono'; font-weight: 800; font-style: italic;">Extra Bold Italic 800</li>
</ul>
<h2>Lato</h2>
<ul>
<li style="font-family: 'Lato'; font-weight: 100;">Thin 100</li>
<li style="font-family: 'Lato'; font-weight: 100; font-style: italic;">Thin Italic 100</li>
<li style="font-family: 'Lato'; font-weight: 300;">Light 300</li>
<li style="font-family: 'Lato'; font-weight: 300; font-style: italic;">Light Italic 300</li>
<li style="font-family: 'Lato'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'Lato'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'Lato'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'Lato'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
<li style="font-family: 'Lato'; font-weight: 900;">Black 900</li>
<li style="font-family: 'Lato'; font-weight: 900; font-style: italic;">Black Italic 900</li>
</ul>
<h2>Liberation Mono</h2>
<ul>
<li style="font-family: 'Liberation Mono'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'Liberation Mono'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'Liberation Mono'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'Liberation Mono'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
</ul>
<h2>Liberation Sans</h2>
<ul>
<li style="font-family: 'Liberation Sans'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'Liberation Sans'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'Liberation Sans'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'Liberation Sans'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
</ul>
<h2>Liberation Serif</h2>
<ul>
<li style="font-family: 'Liberation Serif'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'Liberation Serif'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'Liberation Serif'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'Liberation Serif'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
</ul>
<h2>Manrope</h2>
<ul>
<li style="font-family: 'Manrope'; font-weight: 200;">Extra Light 200</li>
<li style="font-family: 'Manrope'; font-weight: 300;">Light 300</li>
<li style="font-family: 'Manrope'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'Manrope'; font-weight: 500;">Medium 500</li>
<li style="font-family: 'Manrope'; font-weight: 600;">Semibold 600</li>
<li style="font-family: 'Manrope'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'Manrope'; font-weight: 800;">Extra Bold 800</li>
</ul>
<h2>Merriweather</h2>
<ul>
<li style="font-family: 'Merriweather'; font-weight: 300;">Light 300</li>
<li style="font-family: 'Merriweather'; font-weight: 300; font-style: italic;">Light Italic 300</li>
<li style="font-family: 'Merriweather'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'Merriweather'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'Merriweather'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'Merriweather'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
<li style="font-family: 'Merriweather'; font-weight: 900;">Black 900</li>
<li style="font-family: 'Merriweather'; font-weight: 900; font-style: italic;">Black Italic 900</li>
</ul>
<h2>Metropolis</h2>
<ul>
<li style="font-family: 'Metropolis'; font-weight: 100;">Thin 100</li>
<li style="font-family: 'Metropolis'; font-weight: 100; font-style: italic;">Thin Italic 100</li>
<li style="font-family: 'Metropolis'; font-weight: 200;">Extra Light 200</li>
<li style="font-family: 'Metropolis'; font-weight: 200; font-style: italic;">Extra Light 200</li>
<li style="font-family: 'Metropolis'; font-weight: 300;">Light 300</li>
<li style="font-family: 'Metropolis'; font-weight: 300; font-style: italic;">Light Italic 300</li>
<li style="font-family: 'Metropolis'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'Metropolis'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'Metropolis'; font-weight: 500;">Medium 500</li>
<li style="font-family: 'Metropolis'; font-weight: 500; font-style: italic;">Medium Italic 500</li>
<li style="font-family: 'Metropolis'; font-weight: 600;">Semibold 600</li>
<li style="font-family: 'Metropolis'; font-weight: 600; font-style: italic;">Semibold 600</li>
<li style="font-family: 'Metropolis'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'Metropolis'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
<li style="font-family: 'Metropolis'; font-weight: 800;">Extra Bold 800</li>
<li style="font-family: 'Metropolis'; font-weight: 800; font-style: italic;">Extra Bold Italic 800</li>
<li style="font-family: 'Metropolis'; font-weight: 900;">Black 900</li>
<li style="font-family: 'Metropolis'; font-weight: 900; font-style: italic;">Black Italic 900</li>
</ul>
<h2>mononoki</h2>
<ul>
<li style="font-family: 'mononoki'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'mononoki'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'mononoki'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'mononoki'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
</ul>
<h2>NeverMind</h2>
<ul>
<li style="font-family: 'NeverMind'; font-weight: 100;">Thin 100</li>
<li style="font-family: 'NeverMind'; font-weight: 100; font-style: italic;">Thin Italic 100</li>
<li style="font-family: 'NeverMind'; font-weight: 200;">Extra Light 200</li>
<li style="font-family: 'NeverMind'; font-weight: 200; font-style: italic;">Extra Light 200</li>
<li style="font-family: 'NeverMind'; font-weight: 300;">Light 300</li>
<li style="font-family: 'NeverMind'; font-weight: 300; font-style: italic;">Light Italic 300</li>
<li style="font-family: 'NeverMind'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'NeverMind'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'NeverMind'; font-weight: 500;">Medium 500</li>
<li style="font-family: 'NeverMind'; font-weight: 500; font-style: italic;">Medium Italic 500</li>
<li style="font-family: 'NeverMind'; font-weight: 600;">Semibold 600</li>
<li style="font-family: 'NeverMind'; font-weight: 600; font-style: italic;">Semibold 600</li>
<li style="font-family: 'NeverMind'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'NeverMind'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
</ul>
<h2>Open Sans</h2>
<ul>
<li style="font-family: 'Open Sans'; font-weight: 300;">Light 300</li>
<li style="font-family: 'Open Sans'; font-weight: 300; font-style: italic;">Light Italic 300</li>
<li style="font-family: 'Open Sans'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'Open Sans'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'Open Sans'; font-weight: 600;">Semibold 600</li>
<li style="font-family: 'Open Sans'; font-weight: 600; font-style: italic;">Semibold 600</li>
<li style="font-family: 'Open Sans'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'Open Sans'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
<li style="font-family: 'Open Sans'; font-weight: 800;">Extra Bold 800</li>
<li style="font-family: 'Open Sans'; font-weight: 800; font-style: italic;">Extra Bold Italic 800</li>
</ul>
<h2>Plus Jakarta Display</h2>
<ul>
<li style="font-family: 'Plus Jakarta Display'; font-weight: 300;">Light 300</li>
<li style="font-family: 'Plus Jakarta Display'; font-weight: 300; font-style: italic;">Light Italic 300</li>
<li style="font-family: 'Plus Jakarta Display'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'Plus Jakarta Display'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'Plus Jakarta Display'; font-weight: 600;">Semibold 600</li>
<li style="font-family: 'Plus Jakarta Display'; font-weight: 600; font-style: italic;">Semibold 600</li>
<li style="font-family: 'Plus Jakarta Display'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'Plus Jakarta Display'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
</ul>
<h2>Plus Jakarta Text</h2>
<ul>
<li style="font-family: 'Plus Jakarta Text'; font-weight: 300;">Light 300</li>
<li style="font-family: 'Plus Jakarta Text'; font-weight: 300; font-style: italic;">Light Italic 300</li>
<li style="font-family: 'Plus Jakarta Text'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'Plus Jakarta Text'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'Plus Jakarta Text'; font-weight: 600;">Semibold 600</li>
<li style="font-family: 'Plus Jakarta Text'; font-weight: 600; font-style: italic;">Semibold 600</li>
<li style="font-family: 'Plus Jakarta Text'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'Plus Jakarta Text'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
</ul>
<h2>Prodigy Sans</h2>
<ul>
<li style="font-family: 'Prodigy Sans'; font-weight: 100;">Thin 100</li>
<li style="font-family: 'Prodigy Sans'; font-weight: 100; font-style: italic;">Thin Italic 100</li>
<li style="font-family: 'Prodigy Sans'; font-weight: 200;">Extra Light 200</li>
<li style="font-family: 'Prodigy Sans'; font-weight: 200; font-style: italic;">Extra Light 200</li>
<li style="font-family: 'Prodigy Sans'; font-weight: 300;">Light 300</li>
<li style="font-family: 'Prodigy Sans'; font-weight: 300; font-style: italic;">Light Italic 300</li>
<li style="font-family: 'Prodigy Sans'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'Prodigy Sans'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'Prodigy Sans'; font-weight: 500;">Medium 500</li>
<li style="font-family: 'Prodigy Sans'; font-weight: 500; font-style: italic;">Medium Italic 500</li>
<li style="font-family: 'Prodigy Sans'; font-weight: 600;">Semibold 600</li>
<li style="font-family: 'Prodigy Sans'; font-weight: 600; font-style: italic;">Semibold 600</li>
<li style="font-family: 'Prodigy Sans'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'Prodigy Sans'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
<li style="font-family: 'Prodigy Sans'; font-weight: 800;">Extra Bold 800</li>
<li style="font-family: 'Prodigy Sans'; font-weight: 800; font-style: italic;">Extra Bold Italic 800</li>
<li style="font-family: 'Prodigy Sans'; font-weight: 900;">Black 900</li>
<li style="font-family: 'Prodigy Sans'; font-weight: 900; font-style: italic;">Black Italic 900</li>
</ul>
<h2>Roboto</h2>
<ul>
<li style="font-family: 'Roboto'; font-weight: 100;">Thin 100</li>
<li style="font-family: 'Roboto'; font-weight: 100; font-style: italic;">Thin Italic 100</li>
<li style="font-family: 'Roboto'; font-weight: 300;">Light 300</li>
<li style="font-family: 'Roboto'; font-weight: 300; font-style: italic;">Light Italic 300</li>
<li style="font-family: 'Roboto'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'Roboto'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'Roboto'; font-weight: 500;">Medium 500</li>
<li style="font-family: 'Roboto'; font-weight: 500; font-style: italic;">Medium Italic 500</li>
<li style="font-family: 'Roboto'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'Roboto'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
</ul>
<h2>Roboto Condensed</h2>
<ul>
<li style="font-family: 'Roboto Condensed'; font-weight: 300;">Light 300</li>
<li style="font-family: 'Roboto Condensed'; font-weight: 300; font-style: italic;">Light Italic 300</li>
<li style="font-family: 'Roboto Condensed'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'Roboto Condensed'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'Roboto Condensed'; font-weight: 500;">Medium 500</li>
<li style="font-family: 'Roboto Condensed'; font-weight: 500; font-style: italic;">Medium Italic 500</li>
<li style="font-family: 'Roboto Condensed'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'Roboto Condensed'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
</ul>
<h2>Roboto Mono</h2>
<ul>
<li style="font-family: 'Roboto Mono'; font-weight: 100;">Thin 100</li>
<li style="font-family: 'Roboto Mono'; font-weight: 100; font-style: italic;">Thin Italic 100</li>
<li style="font-family: 'Roboto Mono'; font-weight: 300;">Light 300</li>
<li style="font-family: 'Roboto Mono'; font-weight: 300; font-style: italic;">Light Italic 300</li>
<li style="font-family: 'Roboto Mono'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'Roboto Mono'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'Roboto Mono'; font-weight: 500;">Medium 500</li>
<li style="font-family: 'Roboto Mono'; font-weight: 500; font-style: italic;">Medium Italic 500</li>
<li style="font-family: 'Roboto Mono'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'Roboto Mono'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
</ul>
<h2>Roboto Slab</h2>
<ul>
<li style="font-family: 'Roboto Slab'; font-weight: 100;">Thin 100</li>
<li style="font-family: 'Roboto Slab'; font-weight: 200;">Extra Light 200</li>
<li style="font-family: 'Roboto Slab'; font-weight: 300;">Light 300</li>
<li style="font-family: 'Roboto Slab'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'Roboto Slab'; font-weight: 500;">Medium 500</li>
<li style="font-family: 'Roboto Slab'; font-weight: 600;">Semibold 600</li>
<li style="font-family: 'Roboto Slab'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'Roboto Slab'; font-weight: 800;">Extra Bold 800</li>
<li style="font-family: 'Roboto Slab'; font-weight: 900;">Black 900</li>
</ul>
<h2>Source Code Pro</h2>
<ul>
<li style="font-family: 'Source Code Pro'; font-weight: 200;">Extra Light 200</li>
<li style="font-family: 'Source Code Pro'; font-weight: 200; font-style: italic;">Extra Light 200</li>
<li style="font-family: 'Source Code Pro'; font-weight: 300;">Light 300</li>
<li style="font-family: 'Source Code Pro'; font-weight: 300; font-style: italic;">Light Italic 300</li>
<li style="font-family: 'Source Code Pro'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'Source Code Pro'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'Source Code Pro'; font-weight: 500;">Medium 500</li>
<li style="font-family: 'Source Code Pro'; font-weight: 500; font-style: italic;">Medium Italic 500</li>
<li style="font-family: 'Source Code Pro'; font-weight: 600;">Semibold 600</li>
<li style="font-family: 'Source Code Pro'; font-weight: 600; font-style: italic;">Semibold 600</li>
<li style="font-family: 'Source Code Pro'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'Source Code Pro'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
<li style="font-family: 'Source Code Pro'; font-weight: 800;">Extra Bold 800</li>
<li style="font-family: 'Source Code Pro'; font-weight: 800; font-style: italic;">Extra Bold Italic 800</li>
<li style="font-family: 'Source Code Pro'; font-weight: 900;">Black 900</li>
<li style="font-family: 'Source Code Pro'; font-weight: 900; font-style: italic;">Black Italic 900</li>
</ul>
<h2>Space Mono</h2>
<ul>
<li style="font-family: 'Space Mono'; font-weight: 400;">Normal 400</li>
<li style="font-family: 'Space Mono'; font-weight: 400; font-style: italic;">Normal Italic 400</li>
<li style="font-family: 'Space Mono'; font-weight: 700;">Bold 700</li>
<li style="font-family: 'Space Mono'; font-weight: 700; font-style: italic;">Bold Italic 700</li>
</ul>
</body>
</html>