Use self-hosted Libron and Cal Sans fonts

Libron is the body serif and Cal Sans is used for headings and the header
nav, both under the SIL OFL with licences alongside the font files. Both
are preloaded so the header doesn't shift while Cal Sans loads. Also
nudge note text up and note/article metadata down in size.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

resources/css/app.css

@@ -2,6 +2,7 @@
 @layer reset, base, components;
 
 @import url('reset.css');
+@import url('fonts.css');
 @import url('colours.css');
 @import url('layout.css');
 @import url('header.css');

resources/css/fonts.css

@@ -0,0 +1,61 @@
+/*
+ * Libron (serif, body text) and Cal Sans (sans, headings), both SIL OFL 1.1
+ * Libron v0.31: https://github.com/nicoverbruggen/libron/releases
+ * Cal Sans v2.011: https://github.com/calcom/sans/releases
+ */
+@font-face {
+  font-family: Libron;
+  src: url('/assets/fonts/libron/Libron-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Libron;
+  src: url('/assets/fonts/libron/Libron-Italic.woff2') format('woff2');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Libron;
+  src: url('/assets/fonts/libron/Libron-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Libron;
+  src: url('/assets/fonts/libron/Libron-BoldItalic.woff2') format('woff2');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Cal Sans';
+  src: url('/assets/fonts/cal-sans/CalSansVF.woff2') format('woff2');
+  font-weight: 400 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@layer base {
+  :root {
+    --font-serif: libron, georgia, serif;
+    --font-sans: 'Cal Sans', system-ui, sans-serif;
+  }
+
+  body {
+    font-family: var(--font-serif);
+  }
+
+  h1, h2, h3,
+  h4, h5, h6,
+  body > header nav {
+    font-family: var(--font-sans);
+  }
+}

resources/css/layout.css

@@ -60,6 +60,10 @@
     pre {
       padding: 1rem;
     }
+
+    .post-info {
+      font-size: 85%;
+    }
   }
 }
 

resources/css/notes.css

@@ -7,6 +7,8 @@
     padding: 1ex 2ex;
 
     .e-content {
+      font-size: 110%;
+
       > p:first-child {
         margin-block-start: 0;
       }
@@ -17,6 +19,10 @@
       }
     }
 
+    .note-metadata {
+      font-size: 85%;
+    }
+
     .syndication-links {
       display: flex;
       flex-direction: row;

resources/views/master.blade.php

@@ -5,6 +5,8 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="csrf-token" content="{{ csrf_token() }}">
         <title>@yield('title'){{ config('app.name') }}</title>
+        <link rel="preload" href="/assets/fonts/libron/Libron-Regular.woff2" as="font" type="font/woff2" crossorigin>
+        <link rel="preload" href="/assets/fonts/cal-sans/CalSansVF.woff2" as="font" type="font/woff2" crossorigin>
         <link rel="stylesheet" href="/assets/highlight/nord.css">
         <link rel="stylesheet" href="/assets/css/app.css">
         <link rel="alternate" type="application/feed+json" title="Blog JSON Feed" href="{{ route('feed.blog.json') }}">