feat(appliedFontsStore): improvement that allow to use correct urls for variable fonts and fixes font weight problems

src/entities/Font/ui/FontApplicator/FontApplicator.svelte

@@ -26,6 +26,8 @@ interface Props {
      * Font weight
      */
     weight?: number;
+
+    isVariable?: boolean;
     /**
      * Additional classes
      */
@@ -36,27 +38,42 @@ interface Props {
     children?: Snippet;
 }
 
-let { name, id, url, weight = 400, className, children }: Props = $props();
+let { name, id, url, weight = 400, isVariable = false, className, children }: Props = $props();
 let element: Element;
 
 // Track if the user has actually scrolled this into view
 let hasEnteredViewport = $state(false);
+const status = $derived(appliedFontsManager.getFontStatus(id, weight, isVariable));
 
 $effect(() => {
+    if (status === 'loaded' || status === 'error') {
+        hasEnteredViewport = true;
+        return;
+    }
+
     const observer = new IntersectionObserver(entries => {
         if (entries[0].isIntersecting) {
             hasEnteredViewport = true;
-            appliedFontsManager.touch([{ id, weight, name, url }]);
 
-            // Once it has entered, we can stop observing to save CPU
+            // Touch ensures it's in the queue.
+            // It's safe to call this even if VirtualList called it
+            // (Manager dedupes based on key)
+            appliedFontsManager.touch([{
+                id,
+                weight,
+                name,
+                url,
+                isVariable,
+            }]);
+
             observer.unobserve(element);
         }
     });
-    observer.observe(element);
+
+    if (element) observer.observe(element);
     return () => observer.disconnect();
 });
 
-const status = $derived(appliedFontsManager.getFontStatus(id, weight));
 // The "Show" condition: Element is in view AND (Font is ready OR it errored out)
 const shouldReveal = $derived(hasEnteredViewport && (status === 'loaded' || status === 'error'));
 
@@ -69,7 +86,7 @@ const transitionClasses = $derived(
 
 <div
     bind:this={element}
-    style:font-family={name}
+    style:font-family={shouldReveal ? `'${name}'` : 'sans-serif'}
     class={cn(
         transitionClasses,
         // If reduced motion is on, we skip the transform/blur entirely

src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte

@@ -4,9 +4,10 @@
     - Handles font registration with the manager
 -->
 <script lang="ts" generics="T extends UnifiedFont">
-import type { FontConfigRequest } from '$entities/Font/model/store/appliedFontsStore/appliedFontsStore.svelte';
 import { VirtualList } from '$shared/ui';
 import type { ComponentProps } from 'svelte';
+import { getFontUrl } from '../../lib';
+import type { FontConfigRequest } from '../../model';
 import {
     type UnifiedFont,
     appliedFontsManager,
@@ -21,16 +22,25 @@ interface Props extends Omit<ComponentProps<typeof VirtualList<T>>, 'onVisibleIt
 let { items, children, onVisibleItemsChange, onNearBottom, weight, ...rest }: Props = $props();
 
 function handleInternalVisibleChange(visibleItems: T[]) {
+    const configs: FontConfigRequest[] = [];
+
+    visibleItems.forEach(item => {
+        const url = getFontUrl(item, weight);
+
+        if (url) {
+            configs.push({
+                id: item.id,
+                name: item.name,
+                weight,
+                url,
+                isVariable: item.features?.isVariable,
+            });
+        }
+    });
     // Auto-register fonts with the manager
-    const configs = visibleItems.map<FontConfigRequest>(item => ({
-        id: item.id,
-        name: item.name,
-        weight,
-        url: item.styles.regular!,
-    }));
     appliedFontsManager.touch(configs);
 
-    // // Forward the call to any external listener
+    // Forward the call to any external listener
     // onVisibleItemsChange?.(visibleItems);
 }