src/entities/Font/model/store/appliedFontsStore/appliedFontsStore.svelte.ts

@@ -112,7 +112,7 @@ export class AppliedFontsManager {
             const internalName = `f_${config.id}`;
             const weightRange = config.isVariable ? '100 900' : `${config.weight}`;
 
-            const font = new FontFace(config.name, `url(${config.url})`, {
+            const font = new FontFace(config.name, `url(${config.url}) format('woff2')`, {
                 weight: weightRange,
                 style: 'normal',
                 display: 'swap',

src/widgets/ComparisonSlider/ui/ComparisonSlider/components/CharacterSlot.svelte

@@ -3,7 +3,10 @@
     Renders a character with particular styling based on proximity, isPast, weight, fontAName, and fontBName.
 -->
 <script lang="ts">
+import { appliedFontsManager } from '$entities/Font';
+import { getFontUrl } from '$entities/Font/lib';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import { comparisonStore } from '../../../model';
 
 interface Props {
     /**
@@ -18,35 +21,51 @@ interface Props {
      * Flag indicating whether character needed to be changed
      */
     isPast: boolean;
-    /**
-     * Font weight of the character
-     */
-    weight: number;
-    /**
-     * Font size of the character
-     */
-    size: number;
-    /**
-     * Name of the font for the character after the change
-     */
-    fontAName: string;
-    /**
-     * Name of the font for the character before the change
-     */
-    fontBName: string;
 }
 
-let { char, proximity, isPast, weight, size, fontAName, fontBName }: Props = $props();
+let { char, proximity, isPast }: Props = $props();
+
+const fontA = $derived(comparisonStore.fontA);
+const fontB = $derived(comparisonStore.fontB);
+const typography = $derived(comparisonStore.typography);
+
+$effect(() => {
+    if (!fontA || !fontB) {
+        return;
+    }
+
+    const urlA = getFontUrl(fontA, typography.weight);
+    const urlB = getFontUrl(fontB, typography.weight);
+
+    if (!urlA || !urlB) {
+        return;
+    }
+
+    appliedFontsManager.touch([{
+        id: fontA.id,
+        weight: typography.weight,
+        name: fontA.name,
+        url: urlA,
+        isVariable: fontA.features.isVariable,
+    }, {
+        id: fontB.id,
+        weight: typography.weight,
+        name: fontB.name,
+        url: urlB,
+        isVariable: fontB.features.isVariable,
+    }]);
+});
 </script>
 
-<span
+{#if fontA && fontB}
+    <span
         class={cn(
             'inline-block transition-all duration-300 ease-out will-change-transform',
             isPast ? 'text-indigo-500' : 'text-neutral-950',
         )}
-    style:font-family={isPast ? fontBName : fontAName}
-    style:font-weight={weight}
-    style:font-size={`${size}px`}
+        style:font-family={isPast ? fontB.name : fontA.name}
+        style:font-weight={typography.weight}
+        style:font-size={`${typography.renderedSize}px`}
         style:transform="
         scale({1 + proximity * 0.3})
         translateY({-proximity * 12}px)
@@ -55,9 +74,10 @@ let { char, proximity, isPast, weight, size, fontAName, fontBName }: Props = $pr
         style:filter="brightness({1 + proximity * 0.2}) contrast({1 + proximity * 0.1})"
         style:text-shadow={proximity > 0.5 ? '0 0 15px rgba(99,102,241,0.3)' : 'none'}
         style:will-change={proximity > 0 ? 'transform, font-family, color' : 'auto'}
->
+    >
         {char === ' ' ? '\u00A0' : char}
-</span>
+    </span>
+{/if}
 
 <style>
 span {