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

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { appliedFontsManager } from '$entities/Font';
+import { getFontUrl } from '$entities/Font/lib';
 import type { ResponsiveManager } from '$shared/lib';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import {
@@ -23,8 +25,27 @@ let { sliderPos, isDragging, typographyControls = $bindable<HTMLDivElement | nul
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
 const isLoading = $derived(comparisonStore.isLoading || !comparisonStore.isReady);
+const weight = $derived(comparisonStore.typography.weight);
 
 const responsive = getContext<ResponsiveManager>('responsive');
+
+$effect(() => {
+    if (!fontA || !fontB) {
+        return;
+    }
+
+    const fontAUrl = getFontUrl(fontA, weight);
+    const fontBUrl = getFontUrl(fontB, weight);
+
+    if (!fontAUrl || !fontBUrl) {
+        return;
+    }
+
+    const fontAConfig = { id: fontA.id, name: fontA.name, url: fontAUrl, weight: weight };
+    const fontBConfig = { id: fontB.id, name: fontB.name, url: fontBUrl, weight: weight };
+
+    appliedFontsManager.touch([fontAConfig, fontBConfig]);
+});
 </script>
 
 {#if responsive.isMobile}