SelfPrivacy.org landing page source code
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

648 lines
33 KiB

9 months ago
  1. <!DOCTYPE html>
  2. <html>
  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. /* common styles */
  61. body {
  62. background: #f1f1f1;
  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. position: relative;
  138. padding: 9px;
  139. margin: 0 0 10px;
  140. font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important;
  141. font-size: 13px;
  142. line-height: 1.428571429;
  143. color: #333;
  144. font-weight: normal !important;
  145. font-style: normal !important;
  146. background-color: #f5f5f5;
  147. border: 1px solid #ccc;
  148. overflow-x: auto;
  149. border-radius: 4px;
  150. }
  151. pre:after {
  152. display: block;
  153. position: absolute;
  154. right: 0;
  155. top: 0;
  156. content: 'Usage';
  157. line-height: 1;
  158. padding: 5px 8px;
  159. font-size: 12px;
  160. color: #767676;
  161. background-color: #fff;
  162. border: 1px solid #ccc;
  163. border-right: none;
  164. border-top: none;
  165. border-radius: 0 4px 0 4px;
  166. z-index: 10;
  167. }
  168. /* responsive */
  169. @media (max-width: 959px) {
  170. .page {
  171. width: auto;
  172. margin: 0;
  173. }
  174. }
  175. </style>
  176. </head>
  177. <body>
  178. <div class="page">
  179. <div class="demo" style="font-family: 'Inter'; font-weight: bold; font-style: italic;">
  180. <h1>Inter Bold Italic</h1>
  181. <pre>.your-style {
  182. font-family: 'Inter';
  183. font-weight: bold;
  184. font-style: italic;
  185. }</pre>
  186. <div class="font-container">
  187. <p class="letters">
  188. abcdefghijklmnopqrstuvwxyz<br>
  189. ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
  190. 0123456789.:,;()*!?'@#<>$%&^+-=~
  191. </p>
  192. <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
  193. <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
  194. <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
  195. <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
  196. <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
  197. <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
  198. <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
  199. <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
  200. <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
  201. <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
  202. <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
  203. </div>
  204. </div>
  205. <div class="demo" style="font-family: 'Inter'; font-weight: 500; font-style: italic;">
  206. <h1>Inter Medium Italic</h1>
  207. <pre>.your-style {
  208. font-family: 'Inter';
  209. font-weight: 500;
  210. font-style: italic;
  211. }</pre>
  212. <div class="font-container">
  213. <p class="letters">
  214. abcdefghijklmnopqrstuvwxyz<br>
  215. ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
  216. 0123456789.:,;()*!?'@#<>$%&^+-=~
  217. </p>
  218. <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
  219. <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
  220. <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
  221. <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
  222. <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
  223. <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
  224. <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
  225. <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
  226. <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
  227. <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
  228. <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
  229. </div>
  230. </div>
  231. <div class="demo" style="font-family: 'Inter'; font-weight: 100; font-style: italic;">
  232. <h1>Inter Thin Italic BETA</h1>
  233. <pre>.your-style {
  234. font-family: 'Inter';
  235. font-weight: 100;
  236. font-style: italic;
  237. }</pre>
  238. <div class="font-container">
  239. <p class="letters">
  240. abcdefghijklmnopqrstuvwxyz<br>
  241. ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
  242. 0123456789.:,;()*!?'@#<>$%&^+-=~
  243. </p>
  244. <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
  245. <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
  246. <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
  247. <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
  248. <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
  249. <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
  250. <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
  251. <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
  252. <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
  253. <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
  254. <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
  255. </div>
  256. </div>
  257. <div class="demo" style="font-family: 'Inter'; font-weight: normal; font-style: normal;">
  258. <h1>Inter Regular</h1>
  259. <pre>.your-style {
  260. font-family: 'Inter';
  261. font-weight: normal;
  262. font-style: normal;
  263. }</pre>
  264. <div class="font-container">
  265. <p class="letters">
  266. abcdefghijklmnopqrstuvwxyz<br>
  267. ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
  268. 0123456789.:,;()*!?'@#<>$%&^+-=~
  269. </p>
  270. <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
  271. <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
  272. <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
  273. <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
  274. <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
  275. <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
  276. <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
  277. <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
  278. <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
  279. <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
  280. <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
  281. </div>
  282. </div>
  283. <div class="demo" style="font-family: 'Inter'; font-weight: 900; font-style: normal;">
  284. <h1>Inter Black</h1>
  285. <pre>.your-style {
  286. font-family: 'Inter';
  287. font-weight: 900;
  288. font-style: normal;
  289. }</pre>
  290. <div class="font-container">
  291. <p class="letters">
  292. abcdefghijklmnopqrstuvwxyz<br>
  293. ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
  294. 0123456789.:,;()*!?'@#<>$%&^+-=~
  295. </p>
  296. <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
  297. <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
  298. <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
  299. <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
  300. <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
  301. <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
  302. <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
  303. <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
  304. <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
  305. <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
  306. <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
  307. </div>
  308. </div>
  309. <div class="demo" style="font-family: 'Inter'; font-weight: 900; font-style: italic;">
  310. <h1>Inter Black Italic</h1>
  311. <pre>.your-style {
  312. font-family: 'Inter';
  313. font-weight: 900;
  314. font-style: italic;
  315. }</pre>
  316. <div class="font-container">
  317. <p class="letters">
  318. abcdefghijklmnopqrstuvwxyz<br>
  319. ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
  320. 0123456789.:,;()*!?'@#<>$%&^+-=~
  321. </p>
  322. <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
  323. <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
  324. <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
  325. <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
  326. <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
  327. <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
  328. <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
  329. <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
  330. <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
  331. <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
  332. <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
  333. </div>
  334. </div>
  335. <div class="demo" style="font-family: 'Inter'; font-weight: 300; font-style: normal;">
  336. <h1>Inter Light BETA</h1>
  337. <pre>.your-style {
  338. font-family: 'Inter';
  339. font-weight: 300;
  340. font-style: normal;
  341. }</pre>
  342. <div class="font-container">
  343. <p class="letters">
  344. abcdefghijklmnopqrstuvwxyz<br>
  345. ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
  346. 0123456789.:,;()*!?'@#<>$%&^+-=~
  347. </p>
  348. <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
  349. <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
  350. <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
  351. <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
  352. <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
  353. <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
  354. <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
  355. <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
  356. <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
  357. <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
  358. <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
  359. </div>
  360. </div>
  361. <div class="demo" style="font-family: 'Inter'; font-weight: 600; font-style: normal;">
  362. <h1>Inter Semi Bold</h1>
  363. <pre>.your-style {
  364. font-family: 'Inter';
  365. font-weight: 600;
  366. font-style: normal;
  367. }</pre>
  368. <div class="font-container">
  369. <p class="letters">
  370. abcdefghijklmnopqrstuvwxyz<br>
  371. ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
  372. 0123456789.:,;()*!?'@#<>$%&^+-=~
  373. </p>
  374. <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
  375. <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
  376. <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
  377. <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
  378. <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
  379. <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
  380. <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
  381. <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
  382. <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
  383. <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
  384. <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
  385. </div>
  386. </div>
  387. <div class="demo" style="font-family: 'Inter'; font-weight: 800; font-style: italic;">
  388. <h1>Inter Extra Bold Italic</h1>
  389. <pre>.your-style {
  390. font-family: 'Inter';
  391. font-weight: 800;
  392. font-style: italic;
  393. }</pre>
  394. <div class="font-container">
  395. <p class="letters">
  396. abcdefghijklmnopqrstuvwxyz<br>
  397. ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
  398. 0123456789.:,;()*!?'@#<>$%&^+-=~
  399. </p>
  400. <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
  401. <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
  402. <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
  403. <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
  404. <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
  405. <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
  406. <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
  407. <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
  408. <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
  409. <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
  410. <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
  411. </div>
  412. </div>
  413. <div class="demo" style="font-family: 'Inter'; font-weight: bold; font-style: normal;">
  414. <h1>Inter Bold</h1>
  415. <pre>.your-style {
  416. font-family: 'Inter';
  417. font-weight: bold;
  418. font-style: normal;
  419. }</pre>
  420. <div class="font-container">
  421. <p class="letters">
  422. abcdefghijklmnopqrstuvwxyz<br>
  423. ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
  424. 0123456789.:,;()*!?'@#<>$%&^+-=~
  425. </p>
  426. <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
  427. <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
  428. <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
  429. <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
  430. <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
  431. <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
  432. <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
  433. <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
  434. <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
  435. <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
  436. <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
  437. </div>
  438. </div>
  439. <div class="demo" style="font-family: 'Inter'; font-weight: 200; font-style: italic;">
  440. <h1>Inter Extra Light Italic BETA</h1>
  441. <pre>.your-style {
  442. font-family: 'Inter';
  443. font-weight: 200;
  444. font-style: italic;
  445. }</pre>
  446. <div class="font-container">
  447. <p class="letters">
  448. abcdefghijklmnopqrstuvwxyz<br>
  449. ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
  450. 0123456789.:,;()*!?'@#<>$%&^+-=~
  451. </p>
  452. <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
  453. <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
  454. <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
  455. <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
  456. <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
  457. <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
  458. <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
  459. <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
  460. <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
  461. <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
  462. <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
  463. </div>
  464. </div>
  465. <div class="demo" style="font-family: 'Inter'; font-weight: 200; font-style: normal;">
  466. <h1>Inter Extra Light BETA</h1>
  467. <pre>.your-style {
  468. font-family: 'Inter';
  469. font-weight: 200;
  470. font-style: normal;
  471. }</pre>
  472. <div class="font-container">
  473. <p class="letters">
  474. abcdefghijklmnopqrstuvwxyz<br>
  475. ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
  476. 0123456789.:,;()*!?'@#<>$%&^+-=~
  477. </p>
  478. <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
  479. <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
  480. <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
  481. <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
  482. <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
  483. <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
  484. <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
  485. <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
  486. <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
  487. <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
  488. <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
  489. </div>
  490. </div>
  491. <div class="demo" style="font-family: 'Inter'; font-weight: 800; font-style: normal;">
  492. <h1>Inter Extra Bold</h1>
  493. <pre>.your-style {
  494. font-family: 'Inter';
  495. font-weight: 800;
  496. font-style: normal;
  497. }</pre>
  498. <div class="font-container">
  499. <p class="letters">
  500. abcdefghijklmnopqrstuvwxyz<br>
  501. ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
  502. 0123456789.:,;()*!?'@#<>$%&^+-=~
  503. </p>
  504. <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
  505. <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
  506. <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
  507. <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
  508. <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
  509. <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
  510. <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
  511. <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
  512. <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
  513. <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
  514. <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
  515. </div>
  516. </div>
  517. <div class="demo" style="font-family: 'Inter'; font-weight: 100; font-style: normal;">
  518. <h1>Inter Thin BETA</h1>
  519. <pre>.your-style {
  520. font-family: 'Inter';
  521. font-weight: 100;
  522. font-style: normal;
  523. }</pre>
  524. <div class="font-container">
  525. <p class="letters">
  526. abcdefghijklmnopqrstuvwxyz<br>
  527. ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
  528. 0123456789.:,;()*!?'@#<>$%&^+-=~
  529. </p>
  530. <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
  531. <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
  532. <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
  533. <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
  534. <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
  535. <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
  536. <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
  537. <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
  538. <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
  539. <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
  540. <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
  541. </div>
  542. </div>
  543. <div class="demo" style="font-family: 'Inter'; font-weight: 300; font-style: italic;">
  544. <h1>Inter Light Italic BETA</h1>
  545. <pre>.your-style {
  546. font-family: 'Inter';
  547. font-weight: 300;
  548. font-style: italic;
  549. }</pre>
  550. <div class="font-container">
  551. <p class="letters">
  552. abcdefghijklmnopqrstuvwxyz<br>
  553. ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
  554. 0123456789.:,;()*!?'@#<>$%&^+-=~
  555. </p>
  556. <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
  557. <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
  558. <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
  559. <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
  560. <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
  561. <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
  562. <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
  563. <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
  564. <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
  565. <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
  566. <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
  567. </div>
  568. </div>
  569. <div class="demo" style="font-family: 'Inter'; font-weight: normal; font-style: italic;">
  570. <h1>Inter Italic</h1>
  571. <pre>.your-style {
  572. font-family: 'Inter';
  573. font-weight: normal;
  574. font-style: italic;
  575. }</pre>
  576. <div class="font-container">
  577. <p class="letters">
  578. abcdefghijklmnopqrstuvwxyz<br>
  579. ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
  580. 0123456789.:,;()*!?'@#<>$%&^+-=~
  581. </p>
  582. <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
  583. <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
  584. <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
  585. <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
  586. <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
  587. <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
  588. <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
  589. <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
  590. <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
  591. <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
  592. <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
  593. </div>
  594. </div>
  595. <div class="demo" style="font-family: 'Inter'; font-weight: 600; font-style: italic;">
  596. <h1>Inter Semi Bold Italic</h1>
  597. <pre>.your-style {
  598. font-family: 'Inter';
  599. font-weight: 600;
  600. font-style: italic;
  601. }</pre>
  602. <div class="font-container">
  603. <p class="letters">
  604. abcdefghijklmnopqrstuvwxyz<br>
  605. ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
  606. 0123456789.:,;()*!?'@#<>$%&^+-=~
  607. </p>
  608. <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
  609. <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
  610. <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
  611. <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
  612. <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
  613. <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
  614. <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
  615. <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
  616. <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
  617. <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
  618. <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
  619. </div>
  620. </div>
  621. <div class="demo" style="font-family: 'Inter'; font-weight: 500; font-style: normal;">
  622. <h1>Inter Medium</h1>
  623. <pre>.your-style {
  624. font-family: 'Inter';
  625. font-weight: 500;
  626. font-style: normal;
  627. }</pre>
  628. <div class="font-container">
  629. <p class="letters">
  630. abcdefghijklmnopqrstuvwxyz<br>
  631. ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
  632. 0123456789.:,;()*!?'@#<>$%&^+-=~
  633. </p>
  634. <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
  635. <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
  636. <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
  637. <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
  638. <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
  639. <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
  640. <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
  641. <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
  642. <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
  643. <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
  644. <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
  645. </div>
  646. </div>
  647. </div>
  648. </body>
  649. </html>