feat: use custom font

Author: pahund

public/fonts/YanoneKaffeesatz-VariableFont_wght.ttf

@@ -4,10 +4,23 @@
   text-align: center;
 }
 
+.site-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  justify-content: center;
+  margin-bottom: 1rem;
+}
+
+.site-header h1 {
+  margin: 0;
+}
+
 .logo {
-  height: 20em;
-  padding: 0.5em;
-  margin-bottom: -5em;
+  width: 10vw;
+  min-width: 60px;
+  height: auto;
+  padding: 0.25em;
   will-change: filter;
   transition: filter 300ms;
 }
@@ -145,12 +158,7 @@
   h1 {
     font-size: 2rem;
   }
-  .logo {
-    max-width: 90vw;
-    width: auto;
-    height: auto;
-  }
-  .audio-player {
+.audio-player {
     max-width: 100%;
     padding: 0 0.5rem 1rem 0.5rem;
   }

src/App.css

@@ -7,14 +7,14 @@ function App() {
 
   return (
     <>
-      <div>
+      <header className="site-header">
         <img
           src={zappermentRocksLogo}
           className="logo"
           alt="zapperment.rocks logo"
         />
-      </div>
-      <h1>zapperment.rocks</h1>
+        <h1>zapperment.rocks</h1>
+      </header>
 
       <div className="hero">
         <div className="hero-inner">

src/App.tsx

@@ -1,5 +1,13 @@
+@font-face {
+  font-family: 'Yanone Kaffeesatz';
+  src: url('/fonts/YanoneKaffeesatz-VariableFont_wght.ttf') format('truetype');
+  font-weight: 200 700;
+  font-style: normal;
+  font-display: swap;
+}
+
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: 'Yanone Kaffeesatz', system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;