website version 0.02
Stephen Kerr
2 years ago
parent
81da736098
commit
02f9c461f4
@ -0,0 +1,124 @@
|
|||||||
|
:root{
|
||||||
|
--pantone1: #7C3BC8;
|
||||||
|
--baseline: 5mm;
|
||||||
|
--margin-left: 40mm;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'worksans';
|
||||||
|
src: url('fonts/worksans/WorkSans-Medium.woff') format('opentype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'worksans';
|
||||||
|
src: url('fonts/worksans/WorkSans-Bold.woff') format('opentype');
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'worksans';
|
||||||
|
src: url('fonts/worksans/WorkSans-MediumItalic.woff') format('opentype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: oblique;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'worksans';
|
||||||
|
src: url('fonts/worksans/WorkSans-BoldItalic.woff') format('opentype');
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: oblique;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print{
|
||||||
|
|
||||||
|
@page{
|
||||||
|
size: 145mm 210mm;
|
||||||
|
bleed: 5mm;
|
||||||
|
marks: crop cross;
|
||||||
|
margin: 10mm 10mm 20mm 50mm;
|
||||||
|
@bottom{
|
||||||
|
color: var(--pantone1);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
@bottom-right{
|
||||||
|
color: var(--pantone1);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
content: counter(page);
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
@bottom-left{
|
||||||
|
color: var(--pantone1);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
content: "La pratique de l'enquête ⟶" string(title);
|
||||||
|
position: relative;
|
||||||
|
left: -40mm;
|
||||||
|
overflow: visible;
|
||||||
|
width: 80mm;
|
||||||
|
/* width: calc(100% + 40mm); */
|
||||||
|
/* text-align: right; */
|
||||||
|
}
|
||||||
|
/* @bottom-left::after{width: 80mm} */
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
font-family: 'worksans', sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: var(--baseline);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6{
|
||||||
|
font-family: 'worksans', serif;
|
||||||
|
color: var(--pantone1);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2{
|
||||||
|
font-size: 48pt;
|
||||||
|
line-height: calc(4 * var(--baseline));
|
||||||
|
position: relative;
|
||||||
|
top: -1.75mm;
|
||||||
|
left: -40mm;
|
||||||
|
width: calc(100% + 40mm);
|
||||||
|
string-set: title content(text);
|
||||||
|
}
|
||||||
|
h3{
|
||||||
|
font-size: 15pt;
|
||||||
|
line-height: calc(2 * var(--baseline));
|
||||||
|
position: relative;
|
||||||
|
top: -2mm;
|
||||||
|
margin-bottom:10mm;
|
||||||
|
left: -40mm;
|
||||||
|
width: calc(100% + 40mm);
|
||||||
|
}
|
||||||
|
.margin-note{
|
||||||
|
/* color: var(--pantone1) */
|
||||||
|
line-height: 3.75mm;
|
||||||
|
padding: 0 5mm;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.note-call::after{
|
||||||
|
|
||||||
|
/* height: 0; */
|
||||||
|
}
|
||||||
|
|
||||||
|
p{
|
||||||
|
margin: 0 0 5mm;
|
||||||
|
position: relative;
|
||||||
|
top: 1.2mm;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup{
|
||||||
|
color: var(--pantone1);
|
||||||
|
line-height: 0.5;
|
||||||
|
}
|
||||||
|
#image{
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,21 +0,0 @@
|
|||||||
/* ----------------------------------------------------
|
|
||||||
VG5000
|
|
||||||
-------------------------------------------------------
|
|
||||||
Designed by Justin Bihan
|
|
||||||
distribued by Velvetyne
|
|
||||||
License: SIL Open Font License, Version 1.1
|
|
||||||
https://velvetyne.fr/fonts/vg5000/
|
|
||||||
---------------------------------------------------- */
|
|
||||||
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'VG5000';
|
|
||||||
src: url('VG5000-Regular_web.eot');
|
|
||||||
src: url('VG5000-Regular_web.eot?#iefix') format('embedded-opentype'),
|
|
||||||
url('VG5000-Regular_web.woff') format('woff'),
|
|
||||||
url('VG5000-Regular_web.woff2') format('woff2'),
|
|
||||||
url('VG5000-Regular_web.ttf') format('truetype'),
|
|
||||||
url('VG5000-Regular_web.svg#svgFontName') format('svg');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,801 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="robots" content="noindex, noarchive">
|
|
||||||
<meta name="format-detection" content="telephone=no">
|
|
||||||
<title>Transfonter demo</title>
|
|
||||||
<link href="stylesheet.css" rel="stylesheet">
|
|
||||||
<style>
|
|
||||||
/*
|
|
||||||
http://meyerweb.com/eric/tools/css/reset/
|
|
||||||
v2.0 | 20110126
|
|
||||||
License: none (public domain)
|
|
||||||
*/
|
|
||||||
html, body, div, span, applet, object, iframe,
|
|
||||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
||||||
a, abbr, acronym, address, big, cite, code,
|
|
||||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
|
||||||
small, strike, strong, sub, sup, tt, var,
|
|
||||||
b, u, i, center,
|
|
||||||
dl, dt, dd, ol, ul, li,
|
|
||||||
fieldset, form, label, legend,
|
|
||||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
||||||
article, aside, canvas, details, embed,
|
|
||||||
figure, figcaption, footer, header, hgroup,
|
|
||||||
menu, nav, output, ruby, section, summary,
|
|
||||||
time, mark, audio, video {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
font-size: 100%;
|
|
||||||
font: inherit;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
/* HTML5 display-role reset for older browsers */
|
|
||||||
article, aside, details, figcaption, figure,
|
|
||||||
footer, header, hgroup, menu, nav, section {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
ol, ul {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
blockquote, q {
|
|
||||||
quotes: none;
|
|
||||||
}
|
|
||||||
blockquote:before, blockquote:after,
|
|
||||||
q:before, q:after {
|
|
||||||
content: '';
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
}
|
|
||||||
/* demo styles */
|
|
||||||
body {
|
|
||||||
background: #f0f0f0;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
.page {
|
|
||||||
background: #fff;
|
|
||||||
width: 920px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 20px 20px 0 20px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.font-container {
|
|
||||||
overflow-x: auto;
|
|
||||||
overflow-y: hidden;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
line-height: 1.3;
|
|
||||||
white-space: nowrap;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
position: relative;
|
|
||||||
background: #444;
|
|
||||||
font-size: 32px;
|
|
||||||
color: #fff;
|
|
||||||
padding: 10px 20px;
|
|
||||||
margin: 0 -20px 12px -20px;
|
|
||||||
}
|
|
||||||
.letters {
|
|
||||||
font-size: 25px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.s10:before {
|
|
||||||
content: '10px';
|
|
||||||
}
|
|
||||||
.s11:before {
|
|
||||||
content: '11px';
|
|
||||||
}
|
|
||||||
.s12:before {
|
|
||||||
content: '12px';
|
|
||||||
}
|
|
||||||
.s14:before {
|
|
||||||
content: '14px';
|
|
||||||
}
|
|
||||||
.s18:before {
|
|
||||||
content: '18px';
|
|
||||||
}
|
|
||||||
.s24:before {
|
|
||||||
content: '24px';
|
|
||||||
}
|
|
||||||
.s30:before {
|
|
||||||
content: '30px';
|
|
||||||
}
|
|
||||||
.s36:before {
|
|
||||||
content: '36px';
|
|
||||||
}
|
|
||||||
.s48:before {
|
|
||||||
content: '48px';
|
|
||||||
}
|
|
||||||
.s60:before {
|
|
||||||
content: '60px';
|
|
||||||
}
|
|
||||||
.s72:before {
|
|
||||||
content: '72px';
|
|
||||||
}
|
|
||||||
.s10:before, .s11:before, .s12:before, .s14:before,
|
|
||||||
.s18:before, .s24:before, .s30:before, .s36:before,
|
|
||||||
.s48:before, .s60:before, .s72:before {
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
color: #999;
|
|
||||||
padding-right: 6px;
|
|
||||||
}
|
|
||||||
pre {
|
|
||||||
display: block;
|
|
||||||
padding: 9px;
|
|
||||||
margin: 0 0 12px;
|
|
||||||
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.428571429;
|
|
||||||
color: #333;
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
overflow-x: auto;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
/* responsive */
|
|
||||||
@media (max-width: 959px) {
|
|
||||||
.page {
|
|
||||||
width: auto;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="page">
|
|
||||||
<div class="demo">
|
|
||||||
<h1 style="font-family: 'HK Grotesk'; font-weight: 600; font-style: normal;">HK Grotesk SemiBold</h1>
|
|
||||||
<pre title="Usage">.your-style {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
font-weight: 600;
|
|
||||||
font-style: normal;
|
|
||||||
}</pre>
|
|
||||||
<pre title="Preload (optional)">
|
|
||||||
<link rel="preload" href="HKGrotesk-SemiBold.woff2" as="font" type="font/woff2" crossorigin></pre>
|
|
||||||
<div class="font-container" style="font-family: 'HK Grotesk'; font-weight: 600; font-style: normal;">
|
|
||||||
<p class="letters">
|
|
||||||
abcdefghijklmnopqrstuvwxyz<br>
|
|
||||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
||||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
|
||||||
</p>
|
|
||||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
<h1 style="font-family: 'HK Grotesk'; font-weight: normal; font-style: italic;">HK Grotesk Italic</h1>
|
|
||||||
<pre title="Usage">.your-style {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: italic;
|
|
||||||
}</pre>
|
|
||||||
<pre title="Preload (optional)">
|
|
||||||
<link rel="preload" href="HKGrotesk-Italic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
|
||||||
<div class="font-container" style="font-family: 'HK Grotesk'; font-weight: normal; font-style: italic;">
|
|
||||||
<p class="letters">
|
|
||||||
abcdefghijklmnopqrstuvwxyz<br>
|
|
||||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
||||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
|
||||||
</p>
|
|
||||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
<h1 style="font-family: 'HK Grotesk'; font-weight: bold; font-style: normal;">HK Grotesk ExtraBold</h1>
|
|
||||||
<pre title="Usage">.your-style {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
font-weight: bold;
|
|
||||||
font-style: normal;
|
|
||||||
}</pre>
|
|
||||||
<pre title="Preload (optional)">
|
|
||||||
<link rel="preload" href="HKGrotesk-ExtraBold.woff2" as="font" type="font/woff2" crossorigin></pre>
|
|
||||||
<div class="font-container" style="font-family: 'HK Grotesk'; font-weight: bold; font-style: normal;">
|
|
||||||
<p class="letters">
|
|
||||||
abcdefghijklmnopqrstuvwxyz<br>
|
|
||||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
||||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
|
||||||
</p>
|
|
||||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
<h1 style="font-family: 'HK Grotesk'; font-weight: normal; font-style: normal;">HK Grotesk Regular</h1>
|
|
||||||
<pre title="Usage">.your-style {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}</pre>
|
|
||||||
<pre title="Preload (optional)">
|
|
||||||
<link rel="preload" href="HKGrotesk-Regular.woff2" as="font" type="font/woff2" crossorigin></pre>
|
|
||||||
<div class="font-container" style="font-family: 'HK Grotesk'; font-weight: normal; font-style: normal;">
|
|
||||||
<p class="letters">
|
|
||||||
abcdefghijklmnopqrstuvwxyz<br>
|
|
||||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
||||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
|
||||||
</p>
|
|
||||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
<h1 style="font-family: 'HK Grotesk Medium Legacy'; font-weight: 500; font-style: normal;">HK Grotesk Medium Legacy</h1>
|
|
||||||
<pre title="Usage">.your-style {
|
|
||||||
font-family: 'HK Grotesk Medium Legacy';
|
|
||||||
font-weight: 500;
|
|
||||||
font-style: normal;
|
|
||||||
}</pre>
|
|
||||||
<pre title="Preload (optional)">
|
|
||||||
<link rel="preload" href="HKGrotesk-MediumLegacy.woff2" as="font" type="font/woff2" crossorigin></pre>
|
|
||||||
<div class="font-container" style="font-family: 'HK Grotesk Medium Legacy'; font-weight: 500; font-style: normal;">
|
|
||||||
<p class="letters">
|
|
||||||
abcdefghijklmnopqrstuvwxyz<br>
|
|
||||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
||||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
|
||||||
</p>
|
|
||||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
<h1 style="font-family: 'HK Grotesk Legacy'; font-weight: normal; font-style: italic;">HK Grotesk Legacy Italic</h1>
|
|
||||||
<pre title="Usage">.your-style {
|
|
||||||
font-family: 'HK Grotesk Legacy';
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: italic;
|
|
||||||
}</pre>
|
|
||||||
<pre title="Preload (optional)">
|
|
||||||
<link rel="preload" href="HKGrotesk-LegacyItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
|
||||||
<div class="font-container" style="font-family: 'HK Grotesk Legacy'; font-weight: normal; font-style: italic;">
|
|
||||||
<p class="letters">
|
|
||||||
abcdefghijklmnopqrstuvwxyz<br>
|
|
||||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
||||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
|
||||||
</p>
|
|
||||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
<h1 style="font-family: 'HK Grotesk Legacy'; font-weight: bold; font-style: italic;">HK Grotesk Bold Legacy Italic</h1>
|
|
||||||
<pre title="Usage">.your-style {
|
|
||||||
font-family: 'HK Grotesk Legacy';
|
|
||||||
font-weight: bold;
|
|
||||||
font-style: italic;
|
|
||||||
}</pre>
|
|
||||||
<pre title="Preload (optional)">
|
|
||||||
<link rel="preload" href="HKGrotesk-BoldLegacyItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
|
||||||
<div class="font-container" style="font-family: 'HK Grotesk Legacy'; font-weight: bold; font-style: italic;">
|
|
||||||
<p class="letters">
|
|
||||||
abcdefghijklmnopqrstuvwxyz<br>
|
|
||||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
||||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
|
||||||
</p>
|
|
||||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
<h1 style="font-family: 'HK Grotesk Light Legacy'; font-weight: 300; font-style: normal;">HK Grotesk Light Legacy</h1>
|
|
||||||
<pre title="Usage">.your-style {
|
|
||||||
font-family: 'HK Grotesk Light Legacy';
|
|
||||||
font-weight: 300;
|
|
||||||
font-style: normal;
|
|
||||||
}</pre>
|
|
||||||
<pre title="Preload (optional)">
|
|
||||||
<link rel="preload" href="HKGrotesk-LightLegacy.woff2" as="font" type="font/woff2" crossorigin></pre>
|
|
||||||
<div class="font-container" style="font-family: 'HK Grotesk Light Legacy'; font-weight: 300; font-style: normal;">
|
|
||||||
<p class="letters">
|
|
||||||
abcdefghijklmnopqrstuvwxyz<br>
|
|
||||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
||||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
|
||||||
</p>
|
|
||||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
<h1 style="font-family: 'HK Grotesk'; font-weight: 900; font-style: normal;">HK Grotesk Black</h1>
|
|
||||||
<pre title="Usage">.your-style {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
font-weight: 900;
|
|
||||||
font-style: normal;
|
|
||||||
}</pre>
|
|
||||||
<pre title="Preload (optional)">
|
|
||||||
<link rel="preload" href="HKGrotesk-Black.woff2" as="font" type="font/woff2" crossorigin></pre>
|
|
||||||
<div class="font-container" style="font-family: 'HK Grotesk'; font-weight: 900; font-style: normal;">
|
|
||||||
<p class="letters">
|
|
||||||
abcdefghijklmnopqrstuvwxyz<br>
|
|
||||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
||||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
|
||||||
</p>
|
|
||||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
<h1 style="font-family: 'HK Grotesk Legacy'; font-weight: bold; font-style: normal;">HK Grotesk Bold Legacy</h1>
|
|
||||||
<pre title="Usage">.your-style {
|
|
||||||
font-family: 'HK Grotesk Legacy';
|
|
||||||
font-weight: bold;
|
|
||||||
font-style: normal;
|
|
||||||
}</pre>
|
|
||||||
<pre title="Preload (optional)">
|
|
||||||
<link rel="preload" href="HKGrotesk-BoldLegacy.woff2" as="font" type="font/woff2" crossorigin></pre>
|
|
||||||
<div class="font-container" style="font-family: 'HK Grotesk Legacy'; font-weight: bold; font-style: normal;">
|
|
||||||
<p class="letters">
|
|
||||||
abcdefghijklmnopqrstuvwxyz<br>
|
|
||||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
||||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
|
||||||
</p>
|
|
||||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
<h1 style="font-family: 'HK Grotesk Light Legacy'; font-weight: 300; font-style: italic;">HK Grotesk Light Legacy Italic</h1>
|
|
||||||
<pre title="Usage">.your-style {
|
|
||||||
font-family: 'HK Grotesk Light Legacy';
|
|
||||||
font-weight: 300;
|
|
||||||
font-style: italic;
|
|
||||||
}</pre>
|
|
||||||
<pre title="Preload (optional)">
|
|
||||||
<link rel="preload" href="HKGrotesk-LightLegacyItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
|
||||||
<div class="font-container" style="font-family: 'HK Grotesk Light Legacy'; font-weight: 300; font-style: italic;">
|
|
||||||
<p class="letters">
|
|
||||||
abcdefghijklmnopqrstuvwxyz<br>
|
|
||||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
||||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
|
||||||
</p>
|
|
||||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
<h1 style="font-family: 'HK Grotesk'; font-weight: 500; font-style: normal;">HK Grotesk Medium</h1>
|
|
||||||
<pre title="Usage">.your-style {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
font-weight: 500;
|
|
||||||
font-style: normal;
|
|
||||||
}</pre>
|
|
||||||
<pre title="Preload (optional)">
|
|
||||||
<link rel="preload" href="HKGrotesk-Medium.woff2" as="font" type="font/woff2" crossorigin></pre>
|
|
||||||
<div class="font-container" style="font-family: 'HK Grotesk'; font-weight: 500; font-style: normal;">
|
|
||||||
<p class="letters">
|
|
||||||
abcdefghijklmnopqrstuvwxyz<br>
|
|
||||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
||||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
|
||||||
</p>
|
|
||||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
<h1 style="font-family: 'HK Grotesk SmBold Legacy'; font-weight: 600; font-style: italic;">HK Grotesk SemiBold Legacy Italic</h1>
|
|
||||||
<pre title="Usage">.your-style {
|
|
||||||
font-family: 'HK Grotesk SmBold Legacy';
|
|
||||||
font-weight: 600;
|
|
||||||
font-style: italic;
|
|
||||||
}</pre>
|
|
||||||
<pre title="Preload (optional)">
|
|
||||||
<link rel="preload" href="HKGrotesk-SemiBoldLegacyItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
|
||||||
<div class="font-container" style="font-family: 'HK Grotesk SmBold Legacy'; font-weight: 600; font-style: italic;">
|
|
||||||
<p class="letters">
|
|
||||||
abcdefghijklmnopqrstuvwxyz<br>
|
|
||||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
||||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
|
||||||
</p>
|
|
||||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
<h1 style="font-family: 'HK Grotesk'; font-weight: 600; font-style: italic;">HK Grotesk SemiBold Italic</h1>
|
|
||||||
<pre title="Usage">.your-style {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
font-weight: 600;
|
|
||||||
font-style: italic;
|
|
||||||
}</pre>
|
|
||||||
<pre title="Preload (optional)">
|
|
||||||
<link rel="preload" href="HKGrotesk-SemiBoldItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
|
||||||
<div class="font-container" style="font-family: 'HK Grotesk'; font-weight: 600; font-style: italic;">
|
|
||||||
<p class="letters">
|
|
||||||
abcdefghijklmnopqrstuvwxyz<br>
|
|
||||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
||||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
|
||||||
</p>
|
|
||||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
<h1 style="font-family: 'HK Grotesk Legacy'; font-weight: normal; font-style: normal;">HK Grotesk Regular Legacy</h1>
|
|
||||||
<pre title="Usage">.your-style {
|
|
||||||
font-family: 'HK Grotesk Legacy';
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}</pre>
|
|
||||||
<pre title="Preload (optional)">
|
|
||||||
<link rel="preload" href="HKGrotesk-RegularLegacy.woff2" as="font" type="font/woff2" crossorigin></pre>
|
|
||||||
<div class="font-container" style="font-family: 'HK Grotesk Legacy'; font-weight: normal; font-style: normal;">
|
|
||||||
<p class="letters">
|
|
||||||
abcdefghijklmnopqrstuvwxyz<br>
|
|
||||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
||||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
|
||||||
</p>
|
|
||||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
<h1 style="font-family: 'HK Grotesk'; font-weight: bold; font-style: italic;">HK Grotesk Bold Italic</h1>
|
|
||||||
<pre title="Usage">.your-style {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
font-weight: bold;
|
|
||||||
font-style: italic;
|
|
||||||
}</pre>
|
|
||||||
<pre title="Preload (optional)">
|
|
||||||
<link rel="preload" href="HKGrotesk-BoldItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
|
||||||
<div class="font-container" style="font-family: 'HK Grotesk'; font-weight: bold; font-style: italic;">
|
|
||||||
<p class="letters">
|
|
||||||
abcdefghijklmnopqrstuvwxyz<br>
|
|
||||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
||||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
|
||||||
</p>
|
|
||||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
<h1 style="font-family: 'HK Grotesk'; font-weight: bold; font-style: normal;">HK Grotesk Bold</h1>
|
|
||||||
<pre title="Usage">.your-style {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
font-weight: bold;
|
|
||||||
font-style: normal;
|
|
||||||
}</pre>
|
|
||||||
<pre title="Preload (optional)">
|
|
||||||
<link rel="preload" href="HKGrotesk-Bold.woff2" as="font" type="font/woff2" crossorigin></pre>
|
|
||||||
<div class="font-container" style="font-family: 'HK Grotesk'; font-weight: bold; font-style: normal;">
|
|
||||||
<p class="letters">
|
|
||||||
abcdefghijklmnopqrstuvwxyz<br>
|
|
||||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
||||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
|
||||||
</p>
|
|
||||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
<h1 style="font-family: 'HK Grotesk SemiBold Legacy'; font-weight: 600; font-style: normal;">HK Grotesk SemiBold Legacy</h1>
|
|
||||||
<pre title="Usage">.your-style {
|
|
||||||
font-family: 'HK Grotesk SemiBold Legacy';
|
|
||||||
font-weight: 600;
|
|
||||||
font-style: normal;
|
|
||||||
}</pre>
|
|
||||||
<pre title="Preload (optional)">
|
|
||||||
<link rel="preload" href="HKGrotesk-SemiBoldLegacy.woff2" as="font" type="font/woff2" crossorigin></pre>
|
|
||||||
<div class="font-container" style="font-family: 'HK Grotesk SemiBold Legacy'; font-weight: 600; font-style: normal;">
|
|
||||||
<p class="letters">
|
|
||||||
abcdefghijklmnopqrstuvwxyz<br>
|
|
||||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
||||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
|
||||||
</p>
|
|
||||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
<h1 style="font-family: 'HK Grotesk'; font-weight: 500; font-style: italic;">HK Grotesk Medium Italic</h1>
|
|
||||||
<pre title="Usage">.your-style {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
font-weight: 500;
|
|
||||||
font-style: italic;
|
|
||||||
}</pre>
|
|
||||||
<pre title="Preload (optional)">
|
|
||||||
<link rel="preload" href="HKGrotesk-MediumItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
|
||||||
<div class="font-container" style="font-family: 'HK Grotesk'; font-weight: 500; font-style: italic;">
|
|
||||||
<p class="letters">
|
|
||||||
abcdefghijklmnopqrstuvwxyz<br>
|
|
||||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
||||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
|
||||||
</p>
|
|
||||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
<h1 style="font-family: 'HK Grotesk'; font-weight: 300; font-style: normal;">HK Grotesk Light</h1>
|
|
||||||
<pre title="Usage">.your-style {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
font-weight: 300;
|
|
||||||
font-style: normal;
|
|
||||||
}</pre>
|
|
||||||
<pre title="Preload (optional)">
|
|
||||||
<link rel="preload" href="HKGrotesk-Light.woff2" as="font" type="font/woff2" crossorigin></pre>
|
|
||||||
<div class="font-container" style="font-family: 'HK Grotesk'; font-weight: 300; font-style: normal;">
|
|
||||||
<p class="letters">
|
|
||||||
abcdefghijklmnopqrstuvwxyz<br>
|
|
||||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
||||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
|
||||||
</p>
|
|
||||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
<h1 style="font-family: 'HK Grotesk Medium Legacy'; font-weight: 500; font-style: italic;">HK Grotesk Medium Legacy Italic</h1>
|
|
||||||
<pre title="Usage">.your-style {
|
|
||||||
font-family: 'HK Grotesk Medium Legacy';
|
|
||||||
font-weight: 500;
|
|
||||||
font-style: italic;
|
|
||||||
}</pre>
|
|
||||||
<pre title="Preload (optional)">
|
|
||||||
<link rel="preload" href="HKGrotesk-MediumLegacyItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
|
||||||
<div class="font-container" style="font-family: 'HK Grotesk Medium Legacy'; font-weight: 500; font-style: italic;">
|
|
||||||
<p class="letters">
|
|
||||||
abcdefghijklmnopqrstuvwxyz<br>
|
|
||||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
||||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
|
||||||
</p>
|
|
||||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
<h1 style="font-family: 'HK Grotesk'; font-weight: 300; font-style: italic;">HK Grotesk Light Italic</h1>
|
|
||||||
<pre title="Usage">.your-style {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
font-weight: 300;
|
|
||||||
font-style: italic;
|
|
||||||
}</pre>
|
|
||||||
<pre title="Preload (optional)">
|
|
||||||
<link rel="preload" href="HKGrotesk-LightItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
|
||||||
<div class="font-container" style="font-family: 'HK Grotesk'; font-weight: 300; font-style: italic;">
|
|
||||||
<p class="letters">
|
|
||||||
abcdefghijklmnopqrstuvwxyz<br>
|
|
||||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
||||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
|
||||||
</p>
|
|
||||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,198 +0,0 @@
|
|||||||
@font-face {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
src: url('HKGrotesk-SemiBold.woff2') format('woff2'),
|
|
||||||
url('HKGrotesk-SemiBold.woff') format('woff');
|
|
||||||
font-weight: 600;
|
|
||||||
font-style: normal;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
src: url('HKGrotesk-Italic.woff2') format('woff2'),
|
|
||||||
url('HKGrotesk-Italic.woff') format('woff');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: italic;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
src: url('HKGrotesk-ExtraBold.woff2') format('woff2'),
|
|
||||||
url('HKGrotesk-ExtraBold.woff') format('woff');
|
|
||||||
font-weight: bold;
|
|
||||||
font-style: normal;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
src: url('HKGrotesk-Regular.woff2') format('woff2'),
|
|
||||||
url('HKGrotesk-Regular.woff') format('woff');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'HK Grotesk Medium Legacy';
|
|
||||||
src: url('HKGrotesk-MediumLegacy.woff2') format('woff2'),
|
|
||||||
url('HKGrotesk-MediumLegacy.woff') format('woff');
|
|
||||||
font-weight: 500;
|
|
||||||
font-style: normal;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'HK Grotesk Legacy';
|
|
||||||
src: url('HKGrotesk-LegacyItalic.woff2') format('woff2'),
|
|
||||||
url('HKGrotesk-LegacyItalic.woff') format('woff');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: italic;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'HK Grotesk Legacy';
|
|
||||||
src: url('HKGrotesk-BoldLegacyItalic.woff2') format('woff2'),
|
|
||||||
url('HKGrotesk-BoldLegacyItalic.woff') format('woff');
|
|
||||||
font-weight: bold;
|
|
||||||
font-style: italic;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'HK Grotesk Light Legacy';
|
|
||||||
src: url('HKGrotesk-LightLegacy.woff2') format('woff2'),
|
|
||||||
url('HKGrotesk-LightLegacy.woff') format('woff');
|
|
||||||
font-weight: 300;
|
|
||||||
font-style: normal;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
src: url('HKGrotesk-Black.woff2') format('woff2'),
|
|
||||||
url('HKGrotesk-Black.woff') format('woff');
|
|
||||||
font-weight: 900;
|
|
||||||
font-style: normal;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'HK Grotesk Legacy';
|
|
||||||
src: url('HKGrotesk-BoldLegacy.woff2') format('woff2'),
|
|
||||||
url('HKGrotesk-BoldLegacy.woff') format('woff');
|
|
||||||
font-weight: bold;
|
|
||||||
font-style: normal;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'HK Grotesk Light Legacy';
|
|
||||||
src: url('HKGrotesk-LightLegacyItalic.woff2') format('woff2'),
|
|
||||||
url('HKGrotesk-LightLegacyItalic.woff') format('woff');
|
|
||||||
font-weight: 300;
|
|
||||||
font-style: italic;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
src: url('HKGrotesk-Medium.woff2') format('woff2'),
|
|
||||||
url('HKGrotesk-Medium.woff') format('woff');
|
|
||||||
font-weight: 500;
|
|
||||||
font-style: normal;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'HK Grotesk SmBold Legacy';
|
|
||||||
src: url('HKGrotesk-SemiBoldLegacyItalic.woff2') format('woff2'),
|
|
||||||
url('HKGrotesk-SemiBoldLegacyItalic.woff') format('woff');
|
|
||||||
font-weight: 600;
|
|
||||||
font-style: italic;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
src: url('HKGrotesk-SemiBoldItalic.woff2') format('woff2'),
|
|
||||||
url('HKGrotesk-SemiBoldItalic.woff') format('woff');
|
|
||||||
font-weight: 600;
|
|
||||||
font-style: italic;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'HK Grotesk Legacy';
|
|
||||||
src: url('HKGrotesk-RegularLegacy.woff2') format('woff2'),
|
|
||||||
url('HKGrotesk-RegularLegacy.woff') format('woff');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
src: url('HKGrotesk-BoldItalic.woff2') format('woff2'),
|
|
||||||
url('HKGrotesk-BoldItalic.woff') format('woff');
|
|
||||||
font-weight: bold;
|
|
||||||
font-style: italic;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
src: url('HKGrotesk-Bold.woff2') format('woff2'),
|
|
||||||
url('HKGrotesk-Bold.woff') format('woff');
|
|
||||||
font-weight: bold;
|
|
||||||
font-style: normal;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'HK Grotesk SemiBold Legacy';
|
|
||||||
src: url('HKGrotesk-SemiBoldLegacy.woff2') format('woff2'),
|
|
||||||
url('HKGrotesk-SemiBoldLegacy.woff') format('woff');
|
|
||||||
font-weight: 600;
|
|
||||||
font-style: normal;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
src: url('HKGrotesk-MediumItalic.woff2') format('woff2'),
|
|
||||||
url('HKGrotesk-MediumItalic.woff') format('woff');
|
|
||||||
font-weight: 500;
|
|
||||||
font-style: italic;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
src: url('HKGrotesk-Light.woff2') format('woff2'),
|
|
||||||
url('HKGrotesk-Light.woff') format('woff');
|
|
||||||
font-weight: 300;
|
|
||||||
font-style: normal;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'HK Grotesk Medium Legacy';
|
|
||||||
src: url('HKGrotesk-MediumLegacyItalic.woff2') format('woff2'),
|
|
||||||
url('HKGrotesk-MediumLegacyItalic.woff') format('woff');
|
|
||||||
font-weight: 500;
|
|
||||||
font-style: italic;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'HK Grotesk';
|
|
||||||
src: url('HKGrotesk-LightItalic.woff2') format('woff2'),
|
|
||||||
url('HKGrotesk-LightItalic.woff') format('woff');
|
|
||||||
font-weight: 300;
|
|
||||||
font-style: italic;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,161 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'Work Sans';
|
||||||
|
src: url('WorkSans-Black.woff2') format('woff2'),
|
||||||
|
url('WorkSans-Black.woff') format('woff');
|
||||||
|
font-weight: 900;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Work Sans';
|
||||||
|
src: url('WorkSans-ExtraBoldItalic.woff2') format('woff2'),
|
||||||
|
url('WorkSans-ExtraBoldItalic.woff') format('woff');
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Work Sans';
|
||||||
|
src: url('WorkSans-Bold.woff2') format('woff2'),
|
||||||
|
url('WorkSans-Bold.woff') format('woff');
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Work Sans';
|
||||||
|
src: url('WorkSans-ExtraBold.woff2') format('woff2'),
|
||||||
|
url('WorkSans-ExtraBold.woff') format('woff');
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Work Sans';
|
||||||
|
src: url('WorkSans-BlackItalic.woff2') format('woff2'),
|
||||||
|
url('WorkSans-BlackItalic.woff') format('woff');
|
||||||
|
font-weight: 900;
|
||||||
|
font-style: italic;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Work Sans';
|
||||||
|
src: url('WorkSans-BoldItalic.woff2') format('woff2'),
|
||||||
|
url('WorkSans-BoldItalic.woff') format('woff');
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Work Sans';
|
||||||
|
src: url('WorkSans-Italic.woff2') format('woff2'),
|
||||||
|
url('WorkSans-Italic.woff') format('woff');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: italic;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Work Sans';
|
||||||
|
src: url('WorkSans-ExtraLightItalic.woff2') format('woff2'),
|
||||||
|
url('WorkSans-ExtraLightItalic.woff') format('woff');
|
||||||
|
font-weight: 200;
|
||||||
|
font-style: italic;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Work Sans';
|
||||||
|
src: url('WorkSans-Light.woff2') format('woff2'),
|
||||||
|
url('WorkSans-Light.woff') format('woff');
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Work Sans';
|
||||||
|
src: url('WorkSans-MediumItalic.woff2') format('woff2'),
|
||||||
|
url('WorkSans-MediumItalic.woff') format('woff');
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: italic;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Work Sans';
|
||||||
|
src: url('WorkSans-LightItalic.woff2') format('woff2'),
|
||||||
|
url('WorkSans-LightItalic.woff') format('woff');
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: italic;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Work Sans';
|
||||||
|
src: url('WorkSans-Medium.woff2') format('woff2'),
|
||||||
|
url('WorkSans-Medium.woff') format('woff');
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Work Sans';
|
||||||
|
src: url('WorkSans-ExtraLight.woff2') format('woff2'),
|
||||||
|
url('WorkSans-ExtraLight.woff') format('woff');
|
||||||
|
font-weight: 200;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Work Sans';
|
||||||
|
src: url('WorkSans-SemiBoldItalic.woff2') format('woff2'),
|
||||||
|
url('WorkSans-SemiBoldItalic.woff') format('woff');
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: italic;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Work Sans';
|
||||||
|
src: url('WorkSans-Thin.woff2') format('woff2'),
|
||||||
|
url('WorkSans-Thin.woff') format('woff');
|
||||||
|
font-weight: 100;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Work Sans';
|
||||||
|
src: url('WorkSans-ThinItalic.woff2') format('woff2'),
|
||||||
|
url('WorkSans-ThinItalic.woff') format('woff');
|
||||||
|
font-weight: 100;
|
||||||
|
font-style: italic;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Work Sans';
|
||||||
|
src: url('WorkSans-Regular.woff2') format('woff2'),
|
||||||
|
url('WorkSans-Regular.woff') format('woff');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Work Sans';
|
||||||
|
src: url('WorkSans-SemiBold.woff2') format('woff2'),
|
||||||
|
url('WorkSans-SemiBold.woff') format('woff');
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 169 KiB |
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue