fix: replace external font imports with self-hosted subset to reduce CSS bloat

Author: jliermann

src/css/custom.css

@@ -11,11 +11,8 @@
 
 /* @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap'); */
 
-/* Only import Latin subset for required font weights to minimize CSS bloat */
-@import "@fontsource/ibm-plex-sans/latin-400.css";
-@import "@fontsource/ibm-plex-sans/latin-600.css";
-@import "@fontsource/ibm-plex-sans/latin-400-italic.css";
-@import "@fontsource/ibm-plex-sans/latin-600-italic.css";
+/* Self-hosted subsetted fonts from /static/fonts */
+@import "./fonts.css";
 
 /********** Global variables ************/
 

src/css/fonts.css

@@ -0,0 +1,33 @@
+/* Self-hosted IBM Plex Sans (subset) */
+
+@font-face {
+	font-family: "IBM Plex Sans";
+	src: url('/fonts/ibm-plex-sans-latin-300-normal.woff2') format('woff2');
+	font-weight: 300;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "IBM Plex Sans";
+	src: url('/fonts/ibm-plex-sans-latin-300-italic.woff2') format('woff2');
+	font-weight: 300;
+	font-style: italic;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "IBM Plex Sans";
+	src: url('/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
+	font-weight: 600;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "IBM Plex Sans";
+	src: url('/fonts/ibm-plex-sans-latin-600-italic.woff2') format('woff2');
+	font-weight: 600;
+	font-style: italic;
+	font-display: swap;
+}