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