Update fonts

core/src/components/Footer.astro

@@ -12,9 +12,7 @@ import logoWHite from '@NixOS/branding/artifacts/internal/nixos-logomark-white-f
 ---
 
 <footer>
-  <div
-    class="bg-secondary-afghani-blue-25 text-primary-white-95 clear-both font-light"
-  >
+  <div class="bg-secondary-afghani-blue-25 text-primary-white-95 clear-both">
     <Container>
       <div
         class="flex flex-col flex-wrap gap-x-4 gap-y-8 pt-12 pb-10 sm:flex-row"
@@ -25,7 +23,7 @@ import logoWHite from '@NixOS/branding/artifacts/internal/nixos-logomark-white-f
               <h4 class="font-heading text-secondary-afghani-blue-85 mb-2 text-xl font-bold">
                 {menu.name}
               </h4>
-              <ul class="font-extralight">
+              <ul class="font-light">
                 {menu.items.map((item) => (
                   <li class="border-secondary-afghani-blue-55 border-b-1 last:border-b-0">
                     <Link

core/src/components/Header.astro

@@ -20,7 +20,7 @@ const navbarItemActiveStyle = `border-b-secondary-afghani-blue-85 bg-secondary-a
 
 <header
   role="banner"
-  class="text-primary-black bg-primary-white sticky top-0 z-50 font-extralight drop-shadow-md"
+  class="text-primary-black bg-primary-white sticky top-0 z-50 font-light drop-shadow-md"
 >
   {
     currentBanner && (

core/src/layouts/Layout.astro

@@ -6,6 +6,7 @@ import Footer from '@/components/Footer.astro';
 import Header from '@/components/Header.astro';
 
 import '@/styles/base.css';
+import '@/styles/route159-fonts.css';
 
 const {
   title = 'Nix & NixOS | Declarative builds and deployments',
@@ -85,13 +86,13 @@ const headFeedLinks = blogMenu.data.map((e) => {
       // Fonts
       import '@fontsource-variable/overpass';
       import '@fontsource-variable/fira-code';
-      import '@fontsource-variable/roboto-flex/wdth.css';
+      import '@fontsource-variable/epilogue';
       import '@/lib/client/scrollToTopHandler.js';
     </script>
 
     <style>
       @font-face {
-        font-family: 'Roboto Flex Variable';
+        font-family: 'Epilogue Variable';
       }
     </style>
   </body>

core/src/pages/index.astro

@@ -150,7 +150,7 @@ posts
           Choose from over 120 000 Packages
         </h2>
         <p
-          class="pb-2 text-center text-2xl leading-relaxed font-extralight md:w-5/6"
+          class="pb-2 text-center text-2xl leading-relaxed font-light md:w-5/6"
         >
           The Nix Packages collection (<a
             class="text-secondary-afghani-blue! font-bold"

core/src/styles/base.css

@@ -1,10 +1,11 @@
 /* The integration's default injected base.css file */
 @import 'tailwindcss';
+@import './route159-fonts.css';
 
 @config '../../tailwind.config.cjs';
 
 @utility text-light-bold {
-  @apply font-extralight;
+  @apply font-light;
 
   & strong {
     @apply font-extrabold;
@@ -61,7 +62,7 @@
   }
 
   article {
-    @apply leading-7 font-light;
+    @apply leading-7;
   }
 
   article ol {

core/src/styles/route159-fonts.css

@@ -0,0 +1,142 @@
+/* Route159 Font Face Declarations */
+
+@font-face {
+  font-family: 'Route159';
+  src: url('/fonts/route159/Route159-Regular.eot');
+  src:
+    url('/fonts/route159/Route159-Regular.eot?#iefix')
+      format('embedded-opentype'),
+    url('/fonts/route159/Route159-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Route159';
+  src: url('/fonts/route159/Route159-Italic.eot');
+  src:
+    url('/fonts/route159/Route159-Italic.eot?#iefix')
+      format('embedded-opentype'),
+    url('/fonts/route159/Route159-Italic.woff') format('woff');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Route159';
+  src: url('/fonts/route159/Route159-UltraLight.eot');
+  src:
+    url('/fonts/route159/Route159-UltraLight.eot?#iefix')
+      format('embedded-opentype'),
+    url('/fonts/route159/Route159-UltraLight.woff') format('woff');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Route159';
+  src: url('/fonts/route159/Route159-UltraLightItalic.eot');
+  src:
+    url('/fonts/route159/Route159-UltraLightItalic.eot?#iefix')
+      format('embedded-opentype'),
+    url('/fonts/route159/Route159-UltraLightItalic.woff') format('woff');
+  font-weight: 200;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Route159';
+  src: url('/fonts/route159/Route159-Light.eot');
+  src:
+    url('/fonts/route159/Route159-Light.eot?#iefix') format('embedded-opentype'),
+    url('/fonts/route159/Route159-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Route159';
+  src: url('/fonts/route159/Route159-LightItalic.eot');
+  src:
+    url('/fonts/route159/Route159-LightItalic.eot?#iefix')
+      format('embedded-opentype'),
+    url('/fonts/route159/Route159-LightItalic.woff') format('woff');
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Route159';
+  src: url('/fonts/route159/Route159-SemiBold.eot');
+  src:
+    url('/fonts/route159/Route159-SemiBold.eot?#iefix')
+      format('embedded-opentype'),
+    url('/fonts/route159/Route159-SemiBold.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Route159';
+  src: url('/fonts/route159/Route159-SemiBoldItalic.eot');
+  src:
+    url('/fonts/route159/Route159-SemiBoldItalic.eot?#iefix')
+      format('embedded-opentype'),
+    url('/fonts/route159/Route159-SemiBoldItalic.woff') format('woff');
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Route159';
+  src: url('/fonts/route159/Route159-Bold.eot');
+  src:
+    url('/fonts/route159/Route159-Bold.eot?#iefix') format('embedded-opentype'),
+    url('/fonts/route159/Route159-Bold.woff') format('woff');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Route159';
+  src: url('/fonts/route159/Route159-BoldItalic.eot');
+  src:
+    url('/fonts/route159/Route159-BoldItalic.eot?#iefix')
+      format('embedded-opentype'),
+    url('/fonts/route159/Route159-BoldItalic.woff') format('woff');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Route159';
+  src: url('/fonts/route159/Route159-Heavy.eot');
+  src:
+    url('/fonts/route159/Route159-Heavy.eot?#iefix') format('embedded-opentype'),
+    url('/fonts/route159/Route159-Heavy.woff') format('woff');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Route159';
+  src: url('/fonts/route159/Route159-HeavyItalic.eot');
+  src:
+    url('/fonts/route159/Route159-HeavyItalic.eot?#iefix')
+      format('embedded-opentype'),
+    url('/fonts/route159/Route159-HeavyItalic.woff') format('woff');
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}

core/tailwind.config.cjs

@@ -53,9 +53,9 @@ module.exports = {
   ],
   theme: {
     fontFamily: {
-      sans: ['Roboto Flex Variable', ...defaultTheme.fontFamily.sans],
-      serif: ['Overpass Variable', ...defaultTheme.fontFamily.serif],
-      heading: ['Overpass Variable', ...defaultTheme.fontFamily.sans],
+      sans: ['Epilogue Variable', ...defaultTheme.fontFamily.sans],
+      serif: ['Route159', ...defaultTheme.fontFamily.serif],
+      heading: ['Route159', ...defaultTheme.fontFamily.sans],
       mono: ['Fira Code Variable', ...defaultTheme.fontFamily.mono],
     },
     colors: colors,