src/routes/Page.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
+import { appliedFontsManager } from '$entities/Font';
+import { displayedFontsStore } from '$features/DisplayFont';
 import FontDisplay from '$features/DisplayFont/ui/FontDisplay/FontDisplay.svelte';
+import { controlManager } from '$features/SetupFont';
+import ComparisonSlider from '$widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte';
 import { FontSearch } from '$widgets/FontSearch';
 
 /**
@@ -9,6 +13,12 @@ import { FontSearch } from '$widgets/FontSearch';
 let searchContainer: HTMLElement;
 
 let isExpanded = $state(false);
+
+$effect(() => {
+    appliedFontsManager.touch(
+        displayedFontsStore.fonts.map(font => ({ slug: font.id, weight: controlManager.weight })),
+    );
+});
 </script>
 
 <!-- Font List -->
@@ -17,6 +27,8 @@ let isExpanded = $state(false);
         <FontSearch bind:showFilters={isExpanded} />
     </div>
 
+    <ComparisonSlider />
+
     <div class="will-change-tranform transition-transform content">
         <FontDisplay />
     </div>