From 0db13404e223f1d96cd52ddc9609a3940f2ad7c7 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 10 Feb 2026 18:12:17 +0300
Subject: [PATCH] feat(ComparisonSlider): add effect with apply fonts logic to
 ensure that even when controls are hiddent fonts are applied

---
 .../components/Controls.svelte                | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
index 61051b2..61ffbb8 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
+++ b/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}