Merge pull request 'feature/initial-font-load' (#24) from feature/initial-font-load into main

Reviewed-on: #24

src/app/styles/app.css

@@ -117,7 +117,7 @@
   }
   body {
     @apply bg-background text-foreground;
-    font-family: 'Karla', system-ui, sans-serif;
+    font-family: "Karla", system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif;
     font-optical-sizing: auto;
   }
 }
@@ -162,3 +162,7 @@
 .animate-nudge {
     animation: nudge 10s ease-in-out infinite;
 }
+
+.barlow {
+    font-family: "Barlow", system-ui, Inter, Roboto, "Segoe UI", Arial, sans-serif;
+}

src/app/ui/Layout.svelte

@@ -15,32 +15,69 @@ import GD from '$shared/assets/GD.svg';
 import { ResponsiveProvider } from '$shared/lib';
 import { ScrollArea } from '$shared/shadcn/ui/scroll-area';
 import { Provider as TooltipProvider } from '$shared/shadcn/ui/tooltip';
-import type { Snippet } from 'svelte';
+import {
+    type Snippet,
+    onMount,
+} from 'svelte';
 
 interface Props {
     children: Snippet;
 }
 
-/** Slot content for route pages to render */
 let { children }: Props = $props();
+let fontsReady = $state(false);
+
+/**
+ * Sets fontsReady flag to true when font for the page logo is loaded.
+ */
+onMount(async () => {
+    if (!('fonts' in document)) {
+        fontsReady = true;
+        return;
+    }
+
+    const required = ['100'];
+
+    const missing = required.filter(
+        w => !document.fonts.check(`${w} 1em Barlow`),
+    );
+
+    if (missing.length > 0) {
+        await Promise.all(
+            missing.map(w => document.fonts.load(`${w} 1em Barlow`)),
+        );
+    }
+    fontsReady = true;
+});
+
+$inspect(fontsReady);
 </script>
 
 <svelte:head>
     <link rel="icon" href={GD} />
+
     <link rel="preconnect" href="https://api.fontshare.com" />
     <link rel="preconnect" href="https://cdn.fontshare.com" crossorigin="anonymous" />
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
     <link
-        href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap"
-        rel="stylesheet"
+        rel="preload"
+        as="style"
+        href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;1,100;1,200&family=Karla:wght@200..800&display=swap"
     >
     <link
-        href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Karla:wght@300&display=swap"
         rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;1,100;1,200&family=Karla:wght@200..800&display=swap"
+        media="print"
+        onload={(e => ((e.currentTarget as HTMLLinkElement).media = 'all'))}
     >
-
+    <noscript>
+        <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;1,100;1,200&family=Karla:wght@200..800&display=swap"
+        >
+    </noscript>
     <title>
         Compare Typography & Typefaces | GlyphDiff
     </title>
@@ -55,7 +92,9 @@ let { children }: Props = $props();
         <!-- <ScrollArea class="h-screen w-screen"> -->
         <main class="flex-1 h-full w-full max-w-6xl mx-auto px-0 pt-0 pb-10 sm:px-6 sm:pt-8 sm:pb-12 md:px-8 md:pt-10 md:pb-16 lg:px-10 lg:pt-12 lg:pb-20 xl:px-16 relative overflow-x-hidden">
             <TooltipProvider>
+                {#if fontsReady}
                     {@render children?.()}
+                {/if}
             </TooltipProvider>
         </main>
         <!-- </ScrollArea> -->

src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte

@@ -23,7 +23,7 @@ import { scrollBreadcrumbsStore } from '../../model';
         "
     >
         <div class="max-w-8xl mx-auto px-4 sm:px-6 h-full flex items-center gap-2 sm:gap-4">
-            <h1 class={cn('font-[Barlow] font-extralight text-sm sm:text-base')}>
+            <h1 class={cn('barlow font-extralight text-sm sm:text-base')}>
                 GLYPHDIFF
             </h1>
 

src/routes/Page.svelte

@@ -4,7 +4,6 @@
 -->
 <script lang="ts">
 import { scrollBreadcrumbsStore } from '$entities/Breadcrumb';
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import {
     Logo,
     Section,
@@ -17,6 +16,8 @@ import EyeIcon from '@lucide/svelte/icons/eye';
 import LineSquiggleIcon from '@lucide/svelte/icons/line-squiggle';
 import ScanSearchIcon from '@lucide/svelte/icons/search';
 import type { Snippet } from 'svelte';
+import { cubicIn } from 'svelte/easing';
+import { fade } from 'svelte/transition';
 
 let searchContainer: HTMLElement;
 
@@ -45,7 +46,10 @@ function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippe
 </script>
 
 <!-- Font List -->
-<div class="p-2 sm:p-3 md:p-4 h-full flex flex-col gap-3 sm:gap-4">
+<div
+    class="p-2 sm:p-3 md:p-4 h-full flex flex-col gap-3 sm:gap-4"
+    in:fade={{ duration: 500, delay: 150, easing: cubicIn }}
+>
     <Section class="my-4 sm:my-10 md:my-12 gap-6 sm:gap-8" onTitleStatusChange={handleTitleStatusChanged}>
         {#snippet icon({ className })}
             <CodeIcon class={className} />

src/shared/ui/Logo/Logo.svelte

@@ -11,7 +11,7 @@ interface Props {
 
 const { class: className }: Props = $props();
 
-const baseClasses = 'font-[Barlow] font-thin text-5xl sm:text-6xl md:text-7xl lg:text-8xl';
+const baseClasses = 'barlow font-thin text-5xl sm:text-6xl md:text-7xl lg:text-8xl';
 
 const title = 'GLYPHDIFF';
 </script>