From 656cb9800e1abe2f02f52ff96675e50bd1aad454 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oskar=20Wickstr=C3=B6m?= <oskar@wickstrom.tech>
Date: Tue, 27 Aug 2024 18:15:47 +0200
Subject: [PATCH] use cdnfonts

---
 index.css     | 29 +++++++++++++++++------------
 index.html    |  2 +-
 template.html |  3 ---
 3 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/index.css b/index.css
index 04bb2d1..0fb8d78 100644
--- a/index.css
+++ b/index.css
@@ -1,16 +1,21 @@
+@import url('https://fonts.cdnfonts.com/css/jetbrains-mono-2');
+
 :root {
-  --font-family: "Fira Code", monospace;
-  --line-height: 1.25rem;
+  --font-family: "JetBrains Mono", monospace;
+  --line-height: 1.20rem;
   --border-thickness: 2px;
-  --bold-weight: 700;
   --text-color: #000;
   --text-color-alt: #666;
   --background-color: #fff;
   --background-color-alt: #eee;
 
+  --font-weight-normal: 500;
+  --font-weight-medium: 600;
+  --font-weight-bold: 800;
+
   font-family: var(--font-family);
   font-optical-sizing: auto;
-  font-weight: 500;
+  font-weight: var(--font-weight-normal);
   font-style: normal;
   font-variant-numeric: tabular-nums lining-nums;
   font-size: 16px;
@@ -64,7 +69,7 @@ body {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-weight: var(--bold-weight);
+  font-weight: var(--font-weight-bold);
   margin: calc(var(--line-height) * 2) 0 var(--line-height);
   line-height: var(--line-height);
 }
@@ -112,7 +117,7 @@ p {
 }
 
 strong {
-  font-weight: var(--bold-weight);
+  font-weight: var(--font-weight-bold);
 }
 em {
   font-style: italic;
@@ -191,7 +196,7 @@ details {
 }
 
 summary {
-  font-weight: 600;
+  font-weight: var(--font-weight-medium);
 }
 details[open] summary {
   margin-bottom: var(--line-height);
@@ -199,7 +204,7 @@ details[open] summary {
 
 details ::marker {
   display: inline-block;
-  content: '►';
+  content: '▶';
   margin: 0;
 }
 details[open] ::marker {
@@ -224,7 +229,7 @@ pre, code {
 }
 
 code {
-  font-weight: 600;
+  font-weight: var(--font-weight-medium);
 }
 
 figure {
@@ -262,7 +267,7 @@ ul ul {
 ol li:before { 
   content: counters(item, ".") ". ";
   counter-increment: item;
-  font-weight: 600;
+  font-weight: var(--font-weight-medium);
 }
 
 li {
@@ -334,7 +339,7 @@ button::-moz-focus-inner {
 
 button {
   text-transform: uppercase;
-  font-weight: 600;
+  font-weight: var(--font-weight-medium);
   cursor: pointer;
 }
 
@@ -350,7 +355,7 @@ label {
   width: calc(round(down, 100%, 1ch));
   height: auto;
   line-height: var(--line-height);
-  font-weight: 600;
+  font-weight: var(--font-weight-medium);
   margin: 0;
 }
 
diff --git a/index.html b/index.html
index ea5112e..221de96 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
   <title>The Monospace Web</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=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
+  <link href="https://fonts.cdnfonts.com/css/ibm-plex-mono" rel="stylesheet">
   <link rel="stylesheet" href="reset.css" />
   <link rel="stylesheet" href="index.css" />
 </head>
diff --git a/template.html b/template.html
index 2d09926..f460b77 100644
--- a/template.html
+++ b/template.html
@@ -17,9 +17,6 @@
   <meta name="description" content="$description-meta$" />
 $endif$
   <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</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=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
 $for(css)$
   <link rel="stylesheet" href="$css$" />
 $endfor$