Use custom fonts and fallback to system font stack

Makes it easier to fix formatting issues across platforms

diff --git a/Source_Code_Pro_Extended.woff2 b/Source_Code_Pro_Extended.woff2
new file mode 100644 (file)
index 0000000..32f6e05
Binary files /dev/null and b/Source_Code_Pro_Extended.woff2 differ

diff --git a/errors/404.html b/errors/404.html
index b3555ba7bef903f001c0aaffe1f316571cd5fbae..a32fe23b8eb334c5996ec6fc08281e36dd87d173 100644 (file)
--- a/errors/404.html
+++ b/errors/404.html
@@ -19,8 +19,9 @@
   <link rel="apple-touch-icon" href="/logo_maskable.png">
   <link rel="manifest" href="/manifest.webmanifest">
   <style>
-    @layer base, print;
+    @layer fonts, base, print;
 
+    @import "/fonts.css" layer(fonts);
     @import "/style.css" layer(base);
     @import "/print.css" layer(print) print;
 

diff --git a/fonts.css b/fonts.css
new file mode 100644 (file)
index 0000000..23a97b0
--- /dev/null
+++ b/fonts.css
@@ -0,0 +1,25 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter&family=Raleway&display=swap');
+
+/* Manually import extended Source Code Pro because Google Fonts does not specify the full Unicode range even 
+  though it's supported by the font (specifically, box-drawing characters are not specified by Google Fonts). */
+@font-face {
+  font-family: "Source Code Pro";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url("/Source_Code_Pro_Extended.woff2") format("woff2");
+}
+
+:root {
+  font-family: "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Helvetica, Arial,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Raleway";
+}
+
+code, kbd {
+  font-family: "Source Code Pro", Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+}

diff --git a/index.html b/index.html
index 8e5b4bc907557085832c83b72a01b51722ea5819..bb8ab5bf83f31cef1d3d6c761b5b07b223ed11aa 100644 (file)
--- a/index.html
+++ b/index.html
@@ -18,8 +18,9 @@
   <link rel="apple-touch-icon" href="/logo_maskable.png">
   <link rel="manifest" href="/manifest.webmanifest">
   <style>
-    @layer base, print, hljs;
+    @layer fonts, base, print, hljs;
 
+    @import "/fonts.css" layer(fonts);
     @import "/style.css" layer(base);
     @import "/print.css" layer(print) print;
     @import "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/default.min.css" layer(hljs);

diff --git a/style.css b/style.css
index edac39df0f5d5ff6174a723f189fb6694735435a..59d74171499c9caa0de28b3a4deef6c3a39865ac 100644 (file)
--- a/style.css
+++ b/style.css
@@ -2,9 +2,6 @@ body {
   display: grid;
   grid-template-rows: auto auto 1fr auto;
   min-block-size: 100dvh;
-  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Helvetica, Arial,
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: hsl(0deg 0% 15%);
   background: radial-gradient(circle at top, hsl(216deg 10% 95%), hsl(216deg 15% 90%) 40%);
   margin: 0;
@@ -137,7 +134,6 @@ a:hover, a:focus, form > button:hover, form > button:focus {
 
 kbd {
   background: linear-gradient(180deg, hsl(0deg 0% 86%), hsl(0deg 0% 94%));
-  font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
   font-weight: bold;
   font-size: 0.75em;
   padding-block: 0.1em;
@@ -161,12 +157,20 @@ blockquote::before {
   background: hsl(216deg 100% 80%);
 }
 
-code:not(.hljs) {
+code {
+  border-radius: 4px;
   background: hsl(0deg 0% 95%);
-  border-radius: 3px;
   padding: 1px 3px 2px;
 }
 
+code.hljs {
+  font-size: 0.85em;
+}
+
+code:not(.hljs) {
+  line-height: 1.5;
+}
+
 .card-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));