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

@@ -20,13 +20,15 @@ interface Props {
      * Font id to load
      */
     id: string;
-
+    /** */
     url: string;
     /**
      * Font weight
      */
     weight?: number;
-
+    /**
+     * Variable font flag
+     */
     isVariable?: boolean;
     /**
      * Additional classes
@@ -75,25 +77,25 @@ $effect(() => {
 });
 
 // The "Show" condition: Element is in view AND (Font is ready OR it errored out)
-const shouldReveal = $derived(hasEnteredViewport && (status === 'loaded' || status === 'error'));
+const shouldReveal = $derived(hasEnteredViewport && (status === 'loaded'));
 
 const transitionClasses = $derived(
     prefersReducedMotion.current
         ? 'transition-none' // Disable CSS transitions if motion is reduced
-        : 'transition-all duration-700 ease-[cubic-bezier(0.22,1,0.36,1)]',
+        : 'transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]',
 );
 </script>
 
 <div
     bind:this={element}
-    style:font-family={shouldReveal ? `'${name}'` : 'sans-serif'}
+    style:font-family={shouldReveal ? `'${name}'` : 'system-ui, -apple-system, sans-serif'}
     class={cn(
         transitionClasses,
         // If reduced motion is on, we skip the transform/blur entirely
         !shouldReveal && !prefersReducedMotion.current
-            && 'opacity-0 translate-y-8 scale-[0.98] blur-sm',
+            && 'opacity-50 scale-[0.95] blur-sm',
         !shouldReveal && prefersReducedMotion.current && 'opacity-0', // Still hide until font is ready, but no movement
-        shouldReveal && 'opacity-100 translate-y-0 scale-100 blur-0',
+        shouldReveal && 'opacity-100 scale-100 blur-0',
         className,
     )}
 >