source for lucas.co
archive/fonts/alegreya/demo.html (26.3K)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <meta name="robots" content="noindex, noarchive">
8 <meta name="format-detection" content="telephone=no">
9 <title>Transfonter demo</title>
10 <link href="stylesheet.css" rel="stylesheet">
11 <style>
12 /*
13 http://meyerweb.com/eric/tools/css/reset/
14 v2.0 | 20110126
15 License: none (public domain)
16 */
17 html, body, div, span, applet, object, iframe,
18 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
19 a, abbr, acronym, address, big, cite, code,
20 del, dfn, em, img, ins, kbd, q, s, samp,
21 small, strike, strong, sub, sup, tt, var,
22 b, u, i, center,
23 dl, dt, dd, ol, ul, li,
24 fieldset, form, label, legend,
25 table, caption, tbody, tfoot, thead, tr, th, td,
26 article, aside, canvas, details, embed,
27 figure, figcaption, footer, header, hgroup,
28 menu, nav, output, ruby, section, summary,
29 time, mark, audio, video {
30 margin: 0;
31 padding: 0;
32 border: 0;
33 font-size: 100%;
34 font: inherit;
35 vertical-align: baseline;
36 }
37 /* HTML5 display-role reset for older browsers */
38 article, aside, details, figcaption, figure,
39 footer, header, hgroup, menu, nav, section {
40 display: block;
41 }
42 body {
43 line-height: 1;
44 }
45 ol, ul {
46 list-style: none;
47 }
48 blockquote, q {
49 quotes: none;
50 }
51 blockquote:before, blockquote:after,
52 q:before, q:after {
53 content: '';
54 content: none;
55 }
56 table {
57 border-collapse: collapse;
58 border-spacing: 0;
59 }
60 /* demo styles */
61 body {
62 background: #f0f0f0;
63 color: #000;
64 }
65 .page {
66 background: #fff;
67 width: 920px;
68 margin: 0 auto;
69 padding: 20px 20px 0 20px;
70 overflow: hidden;
71 }
72 .font-container {
73 overflow-x: auto;
74 overflow-y: hidden;
75 margin-bottom: 40px;
76 line-height: 1.3;
77 white-space: nowrap;
78 padding-bottom: 5px;
79 }
80 h1 {
81 position: relative;
82 background: #444;
83 font-size: 32px;
84 color: #fff;
85 padding: 10px 20px;
86 margin: 0 -20px 12px -20px;
87 }
88 .letters {
89 font-size: 25px;
90 margin-bottom: 20px;
91 }
92 .s10:before {
93 content: '10px';
94 }
95 .s11:before {
96 content: '11px';
97 }
98 .s12:before {
99 content: '12px';
100 }
101 .s14:before {
102 content: '14px';
103 }
104 .s18:before {
105 content: '18px';
106 }
107 .s24:before {
108 content: '24px';
109 }
110 .s30:before {
111 content: '30px';
112 }
113 .s36:before {
114 content: '36px';
115 }
116 .s48:before {
117 content: '48px';
118 }
119 .s60:before {
120 content: '60px';
121 }
122 .s72:before {
123 content: '72px';
124 }
125 .s10:before, .s11:before, .s12:before, .s14:before,
126 .s18:before, .s24:before, .s30:before, .s36:before,
127 .s48:before, .s60:before, .s72:before {
128 font-family: Arial, sans-serif;
129 font-size: 10px;
130 font-weight: normal;
131 font-style: normal;
132 color: #999;
133 padding-right: 6px;
134 }
135 pre {
136 display: block;
137 padding: 9px;
138 margin: 0 0 12px;
139 font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
140 font-size: 13px;
141 line-height: 1.428571429;
142 color: #333;
143 font-weight: normal;
144 font-style: normal;
145 background-color: #f5f5f5;
146 border: 1px solid #ccc;
147 overflow-x: auto;
148 border-radius: 4px;
149 }
150 /* responsive */
151 @media (max-width: 959px) {
152 .page {
153 width: auto;
154 margin: 0;
155 }
156 }
157 </style>
158 </head>
159 <body>
160 <div class="page">
161 <div class="demo">
162 <h1 style="font-family: 'Alegreya'; font-weight: 900; font-style: normal;">Alegreya Black</h1>
163 <pre title="Usage">.your-style {
164 font-family: 'Alegreya';
165 font-weight: 900;
166 font-style: normal;
167 }</pre>
168 <pre title="Preload (optional)">
169 <link rel="preload" href="Alegreya-Black.woff2" as="font" type="font/woff2" crossorigin></pre>
170 <div class="font-container" style="font-family: 'Alegreya'; font-weight: 900; font-style: normal;">
171 <p class="letters">
172 abcdefghijklmnopqrstuvwxyz<br>
173 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
174 0123456789.:,;()*!?'@#<>$%&^+-=~
175 </p>
176 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
177 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
178 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
179 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
180 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
181 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
182 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
183 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
184 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
185 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
186 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
187 </div>
188 </div>
189
190 <div class="demo">
191 <h1 style="font-family: 'Alegreya'; font-weight: bold; font-style: italic;">Alegreya Bold Italic</h1>
192 <pre title="Usage">.your-style {
193 font-family: 'Alegreya';
194 font-weight: bold;
195 font-style: italic;
196 }</pre>
197 <pre title="Preload (optional)">
198 <link rel="preload" href="Alegreya-BoldItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
199 <div class="font-container" style="font-family: 'Alegreya'; font-weight: bold; font-style: italic;">
200 <p class="letters">
201 abcdefghijklmnopqrstuvwxyz<br>
202 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
203 0123456789.:,;()*!?'@#<>$%&^+-=~
204 </p>
205 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
206 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
207 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
208 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
209 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
210 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
211 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
212 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
213 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
214 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
215 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
216 </div>
217 </div>
218
219 <div class="demo">
220 <h1 style="font-family: 'Alegreya SC'; font-weight: normal; font-style: normal;">Alegreya SC</h1>
221 <pre title="Usage">.your-style {
222 font-family: 'Alegreya SC';
223 font-weight: normal;
224 font-style: normal;
225 }</pre>
226 <pre title="Preload (optional)">
227 <link rel="preload" href="AlegreyaSC-Regular.woff2" as="font" type="font/woff2" crossorigin></pre>
228 <div class="font-container" style="font-family: 'Alegreya SC'; font-weight: normal; font-style: normal;">
229 <p class="letters">
230 abcdefghijklmnopqrstuvwxyz<br>
231 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
232 0123456789.:,;()*!?'@#<>$%&^+-=~
233 </p>
234 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
235 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
236 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
237 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
238 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
239 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
240 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
241 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
242 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
243 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
244 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
245 </div>
246 </div>
247
248 <div class="demo">
249 <h1 style="font-family: 'Alegreya'; font-weight: normal; font-style: italic;">Alegreya Italic</h1>
250 <pre title="Usage">.your-style {
251 font-family: 'Alegreya';
252 font-weight: normal;
253 font-style: italic;
254 }</pre>
255 <pre title="Preload (optional)">
256 <link rel="preload" href="Alegreya-Italic.woff2" as="font" type="font/woff2" crossorigin></pre>
257 <div class="font-container" style="font-family: 'Alegreya'; font-weight: normal; font-style: italic;">
258 <p class="letters">
259 abcdefghijklmnopqrstuvwxyz<br>
260 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
261 0123456789.:,;()*!?'@#<>$%&^+-=~
262 </p>
263 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
264 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
265 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
266 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
267 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
268 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
269 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
270 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
271 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
272 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
273 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
274 </div>
275 </div>
276
277 <div class="demo">
278 <h1 style="font-family: 'Alegreya SC'; font-weight: 900; font-style: italic;">Alegreya SC Black Italic</h1>
279 <pre title="Usage">.your-style {
280 font-family: 'Alegreya SC';
281 font-weight: 900;
282 font-style: italic;
283 }</pre>
284 <pre title="Preload (optional)">
285 <link rel="preload" href="AlegreyaSC-BlackItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
286 <div class="font-container" style="font-family: 'Alegreya SC'; font-weight: 900; font-style: italic;">
287 <p class="letters">
288 abcdefghijklmnopqrstuvwxyz<br>
289 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
290 0123456789.:,;()*!?'@#<>$%&^+-=~
291 </p>
292 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
293 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
294 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
295 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
296 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
297 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
298 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
299 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
300 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
301 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
302 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
303 </div>
304 </div>
305
306 <div class="demo">
307 <h1 style="font-family: 'Alegreya SC'; font-weight: normal; font-style: italic;">Alegreya SC Italic</h1>
308 <pre title="Usage">.your-style {
309 font-family: 'Alegreya SC';
310 font-weight: normal;
311 font-style: italic;
312 }</pre>
313 <pre title="Preload (optional)">
314 <link rel="preload" href="AlegreyaSC-Italic.woff2" as="font" type="font/woff2" crossorigin></pre>
315 <div class="font-container" style="font-family: 'Alegreya SC'; font-weight: normal; font-style: italic;">
316 <p class="letters">
317 abcdefghijklmnopqrstuvwxyz<br>
318 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
319 0123456789.:,;()*!?'@#<>$%&^+-=~
320 </p>
321 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
322 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
323 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
324 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
325 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
326 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
327 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
328 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
329 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
330 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
331 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
332 </div>
333 </div>
334
335 <div class="demo">
336 <h1 style="font-family: 'Alegreya SC'; font-weight: bold; font-style: italic;">Alegreya SC Bold Italic</h1>
337 <pre title="Usage">.your-style {
338 font-family: 'Alegreya SC';
339 font-weight: bold;
340 font-style: italic;
341 }</pre>
342 <pre title="Preload (optional)">
343 <link rel="preload" href="AlegreyaSC-BoldItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
344 <div class="font-container" style="font-family: 'Alegreya SC'; font-weight: bold; font-style: italic;">
345 <p class="letters">
346 abcdefghijklmnopqrstuvwxyz<br>
347 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
348 0123456789.:,;()*!?'@#<>$%&^+-=~
349 </p>
350 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
351 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
352 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
353 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
354 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
355 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
356 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
357 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
358 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
359 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
360 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
361 </div>
362 </div>
363
364 <div class="demo">
365 <h1 style="font-family: 'Alegreya'; font-weight: normal; font-style: normal;">Alegreya</h1>
366 <pre title="Usage">.your-style {
367 font-family: 'Alegreya';
368 font-weight: normal;
369 font-style: normal;
370 }</pre>
371 <pre title="Preload (optional)">
372 <link rel="preload" href="Alegreya-Regular.woff2" as="font" type="font/woff2" crossorigin></pre>
373 <div class="font-container" style="font-family: 'Alegreya'; font-weight: normal; font-style: normal;">
374 <p class="letters">
375 abcdefghijklmnopqrstuvwxyz<br>
376 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
377 0123456789.:,;()*!?'@#<>$%&^+-=~
378 </p>
379 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
380 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
381 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
382 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
383 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
384 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
385 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
386 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
387 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
388 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
389 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
390 </div>
391 </div>
392
393 <div class="demo">
394 <h1 style="font-family: 'Alegreya SC'; font-weight: bold; font-style: normal;">Alegreya SC Bold</h1>
395 <pre title="Usage">.your-style {
396 font-family: 'Alegreya SC';
397 font-weight: bold;
398 font-style: normal;
399 }</pre>
400 <pre title="Preload (optional)">
401 <link rel="preload" href="AlegreyaSC-Bold.woff2" as="font" type="font/woff2" crossorigin></pre>
402 <div class="font-container" style="font-family: 'Alegreya SC'; font-weight: bold; font-style: normal;">
403 <p class="letters">
404 abcdefghijklmnopqrstuvwxyz<br>
405 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
406 0123456789.:,;()*!?'@#<>$%&^+-=~
407 </p>
408 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
409 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
410 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
411 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
412 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
413 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
414 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
415 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
416 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
417 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
418 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
419 </div>
420 </div>
421
422 <div class="demo">
423 <h1 style="font-family: 'Alegreya'; font-weight: 900; font-style: italic;">Alegreya Black Italic</h1>
424 <pre title="Usage">.your-style {
425 font-family: 'Alegreya';
426 font-weight: 900;
427 font-style: italic;
428 }</pre>
429 <pre title="Preload (optional)">
430 <link rel="preload" href="Alegreya-BlackItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
431 <div class="font-container" style="font-family: 'Alegreya'; font-weight: 900; font-style: italic;">
432 <p class="letters">
433 abcdefghijklmnopqrstuvwxyz<br>
434 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
435 0123456789.:,;()*!?'@#<>$%&^+-=~
436 </p>
437 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
438 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
439 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
440 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
441 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
442 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
443 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
444 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
445 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
446 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
447 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
448 </div>
449 </div>
450
451 <div class="demo">
452 <h1 style="font-family: 'Alegreya SC'; font-weight: 900; font-style: normal;">Alegreya SC Black</h1>
453 <pre title="Usage">.your-style {
454 font-family: 'Alegreya SC';
455 font-weight: 900;
456 font-style: normal;
457 }</pre>
458 <pre title="Preload (optional)">
459 <link rel="preload" href="AlegreyaSC-Black.woff2" as="font" type="font/woff2" crossorigin></pre>
460 <div class="font-container" style="font-family: 'Alegreya SC'; font-weight: 900; font-style: normal;">
461 <p class="letters">
462 abcdefghijklmnopqrstuvwxyz<br>
463 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
464 0123456789.:,;()*!?'@#<>$%&^+-=~
465 </p>
466 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
467 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
468 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
469 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
470 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
471 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
472 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
473 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
474 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
475 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
476 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
477 </div>
478 </div>
479
480 <div class="demo">
481 <h1 style="font-family: 'Alegreya'; font-weight: bold; font-style: normal;">Alegreya Bold</h1>
482 <pre title="Usage">.your-style {
483 font-family: 'Alegreya';
484 font-weight: bold;
485 font-style: normal;
486 }</pre>
487 <pre title="Preload (optional)">
488 <link rel="preload" href="Alegreya-Bold.woff2" as="font" type="font/woff2" crossorigin></pre>
489 <div class="font-container" style="font-family: 'Alegreya'; font-weight: bold; font-style: normal;">
490 <p class="letters">
491 abcdefghijklmnopqrstuvwxyz<br>
492 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
493 0123456789.:,;()*!?'@#<>$%&^+-=~
494 </p>
495 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
496 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
497 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
498 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
499 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
500 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
501 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
502 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
503 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
504 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
505 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
506 </div>
507 </div>
508
509 </div>
510 </body>
511 </html>