diegoenriquezserrano.dev
A collection of open webfonts hosted on a multi-region CDN. Available for direct use. https://fonts.diegoenriquezserrano.dev
index.html
+359
+359
index.html
+359
index.html
···
1
+
<!doctype html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="UTF-8" />
5
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+
<link rel="stylesheet" href="/min/liberation-mono.min.css" />
7
+
<link rel="stylesheet" href="/min/libre-franklin.min.css" />
8
+
<link rel="stylesheet" href="/min/open-sans.min.css" />
9
+
<link rel="stylesheet" href="/min/orbitron.min.css" />
10
+
<link rel="stylesheet" href="/min/roboto-mono.min.css" />
11
+
<link rel="stylesheet" href="/min/roboto.min.css" />
12
+
<style type="text/css">
13
+
body {
14
+
background-color: rgba(23, 23, 23, 1);
15
+
color: rgba(225, 225, 225, 1);
16
+
font-family:
17
+
"Open Sans", "Liberation Sans", Arial, Helvetica, "Segoe UI", Tahoma,
18
+
Verdana, sans-serif;
19
+
}
20
+
21
+
main {
22
+
align-items: center;
23
+
display: flex;
24
+
flex-direction: column;
25
+
gap: 1.5rem;
26
+
justify-content: start;
27
+
padding: 0.75rem 1.5rem;
28
+
}
29
+
30
+
section {
31
+
border-radius: 0.5rem;
32
+
border: 0.125rem outset rgba(75, 75, 75, 1);
33
+
box-shadow: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.5);
34
+
font-size: 1.25rem;
35
+
max-width: 35rem;
36
+
overflow: hidden;
37
+
padding: 1rem;
38
+
width: 100%;
39
+
}
40
+
41
+
.name {
42
+
color: rgba(205, 205, 205, 1);
43
+
font-size: 1rem;
44
+
}
45
+
46
+
code {
47
+
background-color: rgba(12, 12, 12, 1);
48
+
border-radius: 0.5rem;
49
+
border: 0.125rem inset rgba(0, 0, 0, 0.5);
50
+
box-shadow: inset 0 -0.125rem 0.5rem 0 rgba(0, 0, 0, 0.5);
51
+
display: block;
52
+
font-family: "Liberation Mono", "Courier New", Courier, monospace;
53
+
font-size: 0.85rem;
54
+
overflow-x: auto;
55
+
overflow-y: hidden;
56
+
padding: 0.5rem 0.85rem;
57
+
white-space: nowrap;
58
+
}
59
+
</style>
60
+
</head>
61
+
<body>
62
+
<main id="main">
63
+
<section id="liberation-mono">
64
+
<p class="name">Liberation Mono</p>
65
+
<p class="font-liberation-mono">
66
+
The human torch was denied a bank loan.
67
+
</p>
68
+
<code>
69
+
<p>
70
+
<link rel="stylesheet"
71
+
href="https://fonts.diegoenriquezserrano.dev/css/gz/liberation-mono.min.css"
72
+
/>
73
+
</p>
74
+
<p><p class="font-liberation-mono">Liberation Mono</p></p>
75
+
</code>
76
+
</section>
77
+
<section id="liberation-mono-bold">
78
+
<p class="name">Liberation Mono Bold</p>
79
+
<p class="font-liberation-mono-bold">
80
+
The human torch was denied a bank loan.
81
+
</p>
82
+
<code>
83
+
<p>
84
+
<link rel="stylesheet"
85
+
href="https://fonts.diegoenriquezserrano.dev/css/gz/liberation-mono.min.css"
86
+
/>
87
+
</p>
88
+
<p>
89
+
<p class="font-liberation-mono-bold">Liberation Mono
90
+
Bold</p>
91
+
</p>
92
+
</code>
93
+
</section>
94
+
<section id="libre-franklin">
95
+
<p class="name">Libre Franklin</p>
96
+
<p class="font-libre-franklin">
97
+
The human torch was denied a bank loan.
98
+
</p>
99
+
<code>
100
+
<p>
101
+
<link rel="stylesheet"
102
+
href="https://fonts.diegoenriquezserrano.dev/css/gz/libre-franklin.min.css"
103
+
/>
104
+
</p>
105
+
<p>
106
+
<p class="font-libre-franklin">Libre Franklin Bold</p>
107
+
</p>
108
+
</code>
109
+
</section>
110
+
<section id="libre-franklin-bold">
111
+
<p class="name">Libre Franklin Bold</p>
112
+
<p class="font-libre-franklin-bold">
113
+
The human torch was denied a bank loan.
114
+
</p>
115
+
<code>
116
+
<p>
117
+
<link rel="stylesheet"
118
+
href="https://fonts.diegoenriquezserrano.dev/css/gz/libre-franklin.min.css"
119
+
/>
120
+
</p>
121
+
<p>
122
+
<p class="font-libre-franklin-bold">Libre Franklin
123
+
Bold</p>
124
+
</p>
125
+
</code>
126
+
</section>
127
+
<section id="libre-franklin-italic">
128
+
<p class="name">Libre Franklin Italic</p>
129
+
<p class="font-libre-franklin-italic">
130
+
The human torch was denied a bank loan.
131
+
</p>
132
+
<code>
133
+
<p>
134
+
<link rel="stylesheet"
135
+
href="https://fonts.diegoenriquezserrano.dev/css/gz/libre-franklin.min.css"
136
+
/>
137
+
</p>
138
+
<p>
139
+
<p class="font-libre-franklin-italic">Libre Franklin
140
+
Italic</p>
141
+
</p>
142
+
</code>
143
+
</section>
144
+
<section id="libre-franklin-bold-italic">
145
+
<p class="name">Libre Franklin Bold Italic</p>
146
+
<p class="font-libre-franklin-bold-italic">
147
+
The human torch was denied a bank loan.
148
+
</p>
149
+
<code>
150
+
<p>
151
+
<link rel="stylesheet"
152
+
href="https://fonts.diegoenriquezserrano.dev/css/gz/libre-franklin.min.css"
153
+
/>
154
+
</p>
155
+
<p>
156
+
<p class="font-libre-franklin-bold-italic">Libre Franklin Bold
157
+
Italic</p>
158
+
</p>
159
+
</code>
160
+
</section>
161
+
<section id="open-sans">
162
+
<p class="name">Open Sans</p>
163
+
<p class="font-open-sans">The human torch was denied a bank loan.</p>
164
+
<code>
165
+
<p>
166
+
<link rel="stylesheet"
167
+
href="https://fonts.diegoenriquezserrano.dev/css/gz/open-sans.min.css"
168
+
/>
169
+
</p>
170
+
<p><p class="font-open-sans-bold">Open Sans</p></p>
171
+
</code>
172
+
</section>
173
+
<section id="open-sans-bold">
174
+
<p class="name">Open Sans Bold</p>
175
+
<p class="font-open-sans-bold">
176
+
The human torch was denied a bank loan.
177
+
</p>
178
+
<code>
179
+
<p>
180
+
<link rel="stylesheet"
181
+
href="https://fonts.diegoenriquezserrano.dev/css/gz/open-sans.min.css"
182
+
/>
183
+
</p>
184
+
<p><p class="font-open-sans-bold">Open Sans Bold</p></p>
185
+
</code>
186
+
</section>
187
+
<section id="open-sans-italic">
188
+
<p class="name">Open Sans Italic</p>
189
+
<p class="font-open-sans-italic">
190
+
The human torch was denied a bank loan.
191
+
</p>
192
+
<code>
193
+
<p>
194
+
<link rel="stylesheet"
195
+
href="https://fonts.diegoenriquezserrano.dev/css/gz/open-sans.min.css"
196
+
/>
197
+
</p>
198
+
<p>
199
+
<p class="font-open-sans-italic">Open Sans Italic</p>
200
+
</p>
201
+
</code>
202
+
</section>
203
+
<section id="open-sans-bold-italic">
204
+
<p class="name">Open Sans Bold Italic</p>
205
+
<p class="font-open-sans-bold-italic">
206
+
The human torch was denied a bank loan.
207
+
</p>
208
+
<code>
209
+
<p>
210
+
<link rel="stylesheet"
211
+
href="https://fonts.diegoenriquezserrano.dev/css/gz/open-sans.min.css"
212
+
/>
213
+
</p>
214
+
<p>
215
+
<p class="font-open-sans-bold-italic">Open Sans Bold
216
+
Italic</p>
217
+
</p>
218
+
</code>
219
+
</section>
220
+
<section id="orbitron">
221
+
<p class="name">Orbitron</p>
222
+
<p class="font-orbitron">The human torch was denied a bank loan.</p>
223
+
<code>
224
+
<p>
225
+
<link rel="stylesheet"
226
+
href="https://fonts.diegoenriquezserrano.dev/css/gz/orbitron.min.css"
227
+
/>
228
+
</p>
229
+
<p><p class="font-orbitron">Orbitron</p></p>
230
+
</code>
231
+
</section>
232
+
<section id="orbitron-bold">
233
+
<p class="name">Orbitron Bold</p>
234
+
<p class="font-orbitron-bold">
235
+
The human torch was denied a bank loan.
236
+
</p>
237
+
<code>
238
+
<p>
239
+
<link rel="stylesheet"
240
+
href="https://fonts.diegoenriquezserrano.dev/css/gz/orbitron.min.css"
241
+
/>
242
+
</p>
243
+
<p><p class="font-orbitron-bold">Orbitron Bold</p></p>
244
+
</code>
245
+
</section>
246
+
<section id="orbitron-black">
247
+
<p class="name">Orbitron Black</p>
248
+
<p class="font-orbitron-black">
249
+
The human torch was denied a bank loan.
250
+
</p>
251
+
<code>
252
+
<p>
253
+
<link rel="stylesheet"
254
+
href="https://fonts.diegoenriquezserrano.dev/css/gz/orbitron.min.css"
255
+
/>
256
+
</p>
257
+
<p><p class="font-orbitron-black">Open Sans Black</p></p>
258
+
</code>
259
+
</section>
260
+
<section id="orbitron-light">
261
+
<p class="name">Orbitron Light</p>
262
+
<p class="font-orbitron-light">
263
+
The human torch was denied a bank loan.
264
+
</p>
265
+
<code>
266
+
<p>
267
+
<link rel="stylesheet"
268
+
href="https://fonts.diegoenriquezserrano.dev/css/gz/orbitron.min.css"
269
+
/>
270
+
</p>
271
+
<p><p class="font-orbitron-light">Open Sans Light</p></p>
272
+
</code>
273
+
</section>
274
+
<section id="roboto">
275
+
<p class="name">Roboto</p>
276
+
<p class="font-roboto">The human torch was denied a bank loan.</p>
277
+
<code>
278
+
<p>
279
+
<link rel="stylesheet"
280
+
href="https://fonts.diegoenriquezserrano.dev/css/gz/roboto.min.css"
281
+
/>
282
+
</p>
283
+
<p><p class="font-roboto">Roboto</p></p>
284
+
</code>
285
+
</section>
286
+
<section id="roboto-bold">
287
+
<p class="name">Roboto Bold</p>
288
+
<p class="font-roboto-bold">The human torch was denied a bank loan.</p>
289
+
<code>
290
+
<p>
291
+
<link rel="stylesheet"
292
+
href="https://fonts.diegoenriquezserrano.dev/css/gz/roboto.min.css"
293
+
/>
294
+
</p>
295
+
<p><p class="font-roboto-bold">Roboto Bold</p></p>
296
+
</code>
297
+
</section>
298
+
<section id="roboto-italic">
299
+
<p class="name">Roboto Italic</p>
300
+
<p class="font-roboto-italic">
301
+
The human torch was denied a bank loan.
302
+
</p>
303
+
<code>
304
+
<p>
305
+
<link rel="stylesheet"
306
+
href="https://fonts.diegoenriquezserrano.dev/css/gz/roboto.min.css"
307
+
/>
308
+
</p>
309
+
<p><p class="font-roboto-italic">Roboto Italic</p></p>
310
+
</code>
311
+
</section>
312
+
<section id="roboto-bold-italic">
313
+
<p class="name">Roboto Bold Italic</p>
314
+
<p class="font-roboto-bold-italic">
315
+
The human torch was denied a bank loan.
316
+
</p>
317
+
<code>
318
+
<p>
319
+
<link rel="stylesheet"
320
+
href="https://fonts.diegoenriquezserrano.dev/css/gz/roboto.min.css"
321
+
/>
322
+
</p>
323
+
<p>
324
+
<p class="font-roboto-bold-italic">Roboto Bold
325
+
Italic</p>
326
+
</p>
327
+
</code>
328
+
</section>
329
+
<section id="roboto-mono">
330
+
<p class="name">Roboto Mono</p>
331
+
<p class="font-roboto-mono">The human torch was denied a bank loan.</p>
332
+
<code>
333
+
<p>
334
+
<link rel="stylesheet"
335
+
href="https://fonts.diegoenriquezserrano.dev/css/gz/roboto-mono.min.css"
336
+
/>
337
+
</p>
338
+
<p><p class="font-roboto-mono">Roboto Mono</p></p>
339
+
</code>
340
+
</section>
341
+
<section id="roboto-mono-bold">
342
+
<p class="name">Roboto Mono Bold</p>
343
+
<p class="font-roboto-mono-bold">
344
+
The human torch was denied a bank loan.
345
+
</p>
346
+
<code>
347
+
<p>
348
+
<link rel="stylesheet"
349
+
href="https://fonts.diegoenriquezserrano.dev/css/gz/roboto-mono.min.css"
350
+
/>
351
+
</p>
352
+
<p>
353
+
<p class="font-roboto-mono-bold">Roboto Mono Bold</p>
354
+
</p>
355
+
</code>
356
+
</section>
357
+
</main>
358
+
</body>
359
+
</html>