Typefaces Pirelli

index.html

@@ -5,6 +5,7 @@
 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Learning how to walk while cat-walking</title>
+		<link rel="stylesheet" href="./static/font/font.css" />
 		<link rel="stylesheet" href="style.css" />
 		<!-- <script src="position.js" defer></script> -->
 		<script src="sticker.js" defer></script>
@@ -19,15 +20,15 @@
 		<div id="sticker-container"></div>
 
 		<ul class="informations-list" id="information-list">
-			<li class="info">Special Issue 16</li>
+			<li class="info bold">Special Issue 16</li>
-			<li class="info">Learning how to walk while cat-walking</li>
+			<li class="info bold">Learning how to walk while cat-walking</li>
 			<li class="deco"><img src="./static/svg/home.svg" /></li>
-			<li class="info">Experimental Publishing</li>
+			<li class="info bold">Experimental Publishing</li>
-			<li class="info">A vernacular API</li>
+			<li class="info bold">A vernacular API</li>
 			<li class="deco"><img src="./static/svg/function.svg" /></li>
 			<li class="info">17.12.2021</li>
 			<li class="deco"><img src="./static/svg/etc.svg" /></li>
-			<li class="info">Varia</li>
+			<li class="info bold">Varia</li>
 			<li class="deco"><img src="./static/svg/rep.svg" /></li>
 			<li class="info">Rotterdam</li>
 			<li class="deco"><img src="./static/svg/map.svg" /></li>

static/font/font.css

@@ -0,0 +1,36 @@
+@font-face {
+    font-family: 'Pirelli';
+    src: url('Pirelli-Regular.woff2') format('woff2'),
+        url('Pirelli-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pirelli';
+    src: url('Pirelli-BoldItalic.woff2') format('woff2'),
+        url('Pirelli-BoldItalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pirelli';
+    src: url('Pirelli-BoldItalic.woff2') format('woff2'),
+        url('Pirelli-BoldItalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pirelli';
+    src: url('Pirelli-Regular.woff2') format('woff2'),
+        url('Pirelli-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+

style.css

@@ -1,7 +1,7 @@
 :root {
 	--thickness: 1px;
 	--background: #9fd3a8;
-	--font: Arial, Helvetica, sans-serif;
+	--font: "Pirelli";
 }
 
 html,
@@ -13,6 +13,11 @@ body {
 	height: 100vh;
 }
 
+.bold {
+	font-weight: bold;
+	font-style: italic;
+}
+
 /* .container {
 	position: absolute;
 	left: 50%;