Update fonts

core/src/components/Footer.astro

@@ -22,10 +22,10 @@ import logoWHite from '@NixOS/branding/artifacts/internal/nixos-logomark-white-f
         {
           footerMenu.data.sections.map((menu) => (
             <div class="flex-1 basis-1/2 md:basis-0">
-              <h4 class="font-heading text-secondary-afghani-blue-85 mb-2 text-xl font-bold">
+              <h4 class="font-heading text-secondary-afghani-blue-85 mb-2 text-xl font-semibold">
                 {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
@@ -45,7 +45,7 @@ import logoWHite from '@NixOS/branding/artifacts/internal/nixos-logomark-white-f
       <hr class="border-secondary-afghani-blue-55" />
 
       <div
-        class="flex flex-col flex-wrap gap-4 py-4 font-extralight lg:flex-row lg:gap-0"
+        class="flex flex-col flex-wrap gap-4 py-4 font-light lg:flex-row lg:gap-0"
       >
         <div class="flex basis-1/2 gap-2">
           <Image src={logoWHite} alt="NixOS" class="inline-block h-14 w-14" />
@@ -84,7 +84,7 @@ import logoWHite from '@NixOS/branding/artifacts/internal/nixos-logomark-white-f
         <hr class="border-secondary-afghani-blue-75 lg:hidden" />
 
         <div
-          class="flex basis-1/2 justify-between gap-4 font-extralight lg:justify-end"
+          class="flex basis-1/2 justify-between gap-4 font-light lg:justify-end"
         >
           <h4 class="my-auto">Connect with us:</h4>
           <div class="my-auto flex gap-4">

core/src/components/Header.astro

@@ -15,12 +15,12 @@ const currentTopRoute = `/${Astro.url.pathname.split('/')[1]}`;
 
 const navbarItemStyle = `text-center text-secondary-afghani-blue-45 md:text-primary-black md:hover:border-b-secondary-afghani-blue-65 border-b-4`;
 const navbarItemInactiveStyle = `border-b-secondary-afghani-blue-95 md:border-b-transparent bg-secondary-afghani-blue-95 md:bg-transparent`;
-const navbarItemActiveStyle = `border-b-secondary-afghani-blue-85 bg-secondary-afghani-blue-85 text-primary-white md:text-primary-black md:bg-transparent font-bold`;
+const navbarItemActiveStyle = `border-b-secondary-afghani-blue-85 bg-secondary-afghani-blue-85 text-primary-white md:text-primary-black md:bg-transparent font-semibold`;
 ---
 
 <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 && (
@@ -29,7 +29,7 @@ const navbarItemActiveStyle = `border-b-secondary-afghani-blue-85 bg-secondary-a
         target="_blank"
         rel="noopener noreferrer"
         class:list={[
-          'block py-2 font-bold',
+          'block py-2 font-semibold',
           currentBanner.data.sitewide.wrapperClasses,
         ]}
       >

core/src/components/ui/Asciinema.astro

@@ -33,7 +33,7 @@ const demoId = 'asciinema-demo-' + src.split('/').pop().split('.')[0];
   {
     title && (
       <a href={`#${demoId}`} class="no-underline!" id={`${demoId}-link`}>
-        <h3 class="font-heading text-secondary-afghani-blue text-xl font-bold">
+        <h3 class="font-heading text-secondary-afghani-blue text-xl font-semibold">
           {title}
         </h3>
       </a>

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

@@ -125,7 +125,7 @@ posts
                 src={feature.data.img}
                 class="mx-auto mb-6 h-32 w-auto"
               />
-              <h2 class="font-heading text-secondary-afghani-blue mb-2 text-3xl leading-none font-bold">
+              <h2 class="font-heading text-secondary-afghani-blue mb-4 text-3xl leading-none font-semibold">
                 {feature.data.title}
               </h2>
               <div class="text-light-bold leading-loose">
@@ -145,15 +145,15 @@ posts
         class="flex w-full flex-col items-center justify-center gap-4 pt-8 pb-8"
       >
         <h2
-          class="font-heading text-secondary-afghani-blue pb-0 text-center text-4xl leading-tight font-bold md:w-2/3"
+          class="font-heading text-secondary-afghani-blue pb-0 text-center text-4xl leading-tight font-semibold md:w-2/3"
         >
           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"
+            class="text-secondary-afghani-blue! font-semibold"
             href="#">Nixpkgs</a
           >) offers a large selection of packages for the Nix package manager.
         </p>
@@ -164,7 +164,7 @@ posts
   <div>
     <Container>
       <h2
-        class="font-heading text-secondary-afghani-blue w-full pb-2 text-center text-4xl font-bold"
+        class="font-heading text-secondary-afghani-blue w-full pb-2 text-center text-4xl font-semibold"
       >
         Examples
       </h2>

core/src/pages/learn.astro

@@ -74,20 +74,18 @@ const learningResources = [
   <Divider style="slope" mirrorY mirrorX />
   <div class="bg-secondary-afghani-blue-45 text-primary-white py-8 md:px-8">
     <Container>
-      <h2 class="font-heading pb-8 text-4xl font-extrabold">Search</h2>
+      <h2 class="font-heading pb-8 text-4xl font-semibold">Search</h2>
       <div class="grid gap-4 md:grid-cols-2">
         <div>
-          <h3 class="font-heading mb-4 text-2xl font-extrabold">
-            Nix packages
-          </h3>
+          <h3 class="font-heading mb-4 text-2xl font-semibold">Nix packages</h3>
           <NixosSearchInput
             color="white"
             size="sm-full"
             collection="packages"
           />
         </div>
         <div>
-          <h3 class="font-heading mb-4 text-2xl font-extrabold">
+          <h3 class="font-heading mb-4 text-2xl font-semibold">
             NixOS options
           </h3>
           <NixosSearchInput color="white" size="sm-full" collection="options" />
@@ -107,10 +105,10 @@ const learningResources = [
                 src="/src/assets/image/doc-icon.svg"
                 class="img-noadjust float-left inline h-20 w-20 pr-6"
               />
-              <h2 class="font-heading text-secondary-afghani-blue mb-4 text-3xl leading-none font-bold">
+              <h2 class="font-heading text-secondary-afghani-blue mb-4 text-3xl leading-none font-semibold">
                 {manual.data.title}
               </h2>
-              <div class="leading-relaxed font-extralight">
+              <div class="leading-relaxed font-light">
                 <Content />
               </div>
             </article>
@@ -125,14 +123,14 @@ const learningResources = [
   <Divider style="slope" mirrorY />
   <div class="bg-secondary-afghani-blue-45 text-primary-white py-8 md:px-8">
     <Container>
-      <h2 class="font-heading pb-8 text-4xl font-extrabold">
+      <h2 class="font-heading pb-8 text-4xl font-semibold">
         Other learning resources
       </h2>
       <div class="grid gap-12 pb-12 md:grid-cols-3 md:gap-4">
         {
           learningResources.map((item) => (
             <div class="flex flex-col items-start">
-              <h3 class="font-heading mb-2 text-2xl font-extrabold">
+              <h3 class="font-heading mb-2 text-2xl font-semibold">
                 {item.title}
               </h3>
               <p class="mb-4 leading-relaxed font-light">{item.description}</p>

core/src/styles/base.css

@@ -1,13 +1,14 @@
 /* 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;
+    @apply font-semibold;
   }
 }
 
@@ -23,9 +24,11 @@
   article &ul li {
     @apply inline-block;
   }
+
   article &ul li::after {
     content: ', ';
   }
+
   article &ul li:last-child::after {
     content: '';
   }
@@ -43,7 +46,7 @@
   }
 
   main a:any-link {
-    @apply text-secondary-afghani-blue-45 underline decoration-1 underline-offset-4;
+    @apply text-secondary-afghani-blue-45 font-normal underline decoration-1 underline-offset-4;
   }
 
   ::selection {
@@ -103,20 +106,22 @@
   article ul.inlinelist li {
     @apply inline-block;
   }
+
   article ul.inlinelist li::after {
     content: ', ';
   }
+
   article ul.inlinelist li:last-child::after {
     content: '';
   }
 
   article b,
   article strong {
-    @apply font-bold;
+    @apply font-semibold;
   }
 
   article h3 {
-    @apply text-secondary-afghani-blue mb-4 text-2xl font-bold;
+    @apply text-secondary-afghani-blue mb-4 text-2xl font-semibold;
   }
 
   article p {
@@ -157,7 +162,7 @@
   article h4,
   article h5,
   article h6 {
-    @apply font-heading text-secondary-afghani-blue leading-tight font-bold;
+    @apply font-heading text-secondary-afghani-blue leading-tight font-semibold;
   }
 
   article h1:not(:first-child),

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;
+}