feat: use Sono font

mtib · mtib · commit 9246c682bb33 · 2025-03-12T14:23:30.000+01:00
diff --git a/src/base.html.jinja2 b/src/base.html.jinja2
@@ -7,11 +7,9 @@
     <title>{% block title %}blog.mtib.dev{% endblock %}</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@500&display=swap" rel="preload" as="style"
-        onload="this.onload=null;this.rel='stylesheet'">
-    <noscript>
-        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@500&display=swap" rel="stylesheet">
-    </noscript>
+    <link href="https://fonts.googleapis.com/css2?family=Sono:wght@500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Sono:wght,MONO@500,0&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Sono:wght,MONO@700,0&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/main.css">
     <link rel="icon" href="/assets/m.png">
     <meta name="application-name" content="blog.mtib.dev">
@@ -31,7 +29,7 @@
 
 <body>
 
-    <div class="noto-sans-default">
+    <div class="sono-body">
         <div style="
         display: flex;
         flex-direction: column;
@@ -40,7 +38,7 @@
         padding: 10px 0 50px 0;">
             <div class="item">
                 {% block heading %}
-                <h1>blog.mtib.dev</h1>
+                <h1 class="sono-mono">blog.mtib.dev</h1>
                 {% endblock %}
             </div>
             {% block content %}
@@ -69,5 +67,4 @@
 
 </body>
 
-
 </html>
diff --git a/src/index.html.jinja2 b/src/index.html.jinja2
@@ -2,7 +2,7 @@
 {% block content %}
 {% for part in index.parts %}
 <div class="item">
-    <h2>{{part.title}}</h2>
+    <h2 class="sono-mono">{{part.title}}</h2>
     {% if part.description %}
     <p>{{part.description}}</p>
     {% endif %}
diff --git a/src/main.css.jinja2 b/src/main.css.jinja2
@@ -50,20 +50,33 @@ h6 {
     color: #fdf;
 }
 
+.sono-body {
+  font-family: "Sono", monospace;
+  font-optical-sizing: auto;
+  font-weight: 500;
+  font-style: normal;
+  font-variation-settings:
+    "MONO" 0;
+}
 
-.noto-sans-default {
-    font-family: "Noto Sans", sans-serif;
-    font-optical-sizing: auto;
-    font-weight: 500;
-    font-style: normal;
-    font-variation-settings:
-        "wdth" 100;
+.sono-mono {
+  font-family: "Sono", monospace;
+  font-optical-sizing: auto;
+  font-weight: 500;
+  font-style: normal;
+  font-variation-settings:
+    "MONO" 1;
 }
 
 a {
     text-decoration: none;
     font-weight: 700;
     color: #f4f;
+    font-family: "Sono", monospace;
+    font-optical-sizing: auto;
+    font-style: normal;
+    font-variation-settings:
+        "MONO" 1;
 }
 
 a:hover {
@@ -74,6 +87,14 @@ a:visited {
     color: #f8f;
 }
 
+h1 {
+    font-size: 4rem;
+}
+
+h2 {
+    font-size: 2.5rem;
+}
+
 ul {
     list-style: none;
     padding-left: 20px;
