src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte

@@ -3,25 +3,35 @@
     - Renders a virtualized list of fonts
     - Handles font registration with the manager
 -->
-<script lang="ts" generics="T extends { id: string }">
+<script lang="ts" generics="T extends UnifiedFont">
+import type { FontConfigRequest } from '$entities/Font/model/store/appliedFontsStore/appliedFontsStore.svelte';
 import { VirtualList } from '$shared/ui';
 import type { ComponentProps } from 'svelte';
-import { appliedFontsManager } from '../../model';
+import {
+    type UnifiedFont,
+    appliedFontsManager,
+} from '../../model';
 
 interface Props extends Omit<ComponentProps<typeof VirtualList<T>>, 'onVisibleItemsChange'> {
     onVisibleItemsChange?: (items: T[]) => void;
     onNearBottom?: (lastVisibleIndex: number) => void;
+    weight: number;
 }
 
-let { items, children, onVisibleItemsChange, onNearBottom, ...rest }: Props = $props();
+let { items, children, onVisibleItemsChange, onNearBottom, weight, ...rest }: Props = $props();
 
 function handleInternalVisibleChange(visibleItems: T[]) {
     // Auto-register fonts with the manager
-    const slugs = visibleItems.map(item => item.id);
-    appliedFontsManager.registerFonts(slugs);
+    const configs = visibleItems.map<FontConfigRequest>(item => ({
+        id: item.id,
+        name: item.name,
+        weight,
+        url: item.styles.regular!,
+    }));
+    appliedFontsManager.touch(configs);
 
-    // Forward the call to any external listener
-    onVisibleItemsChange?.(visibleItems);
+    // // Forward the call to any external listener
+    // onVisibleItemsChange?.(visibleItems);
 }
 
 function handleNearBottom(lastVisibleIndex: number) {

src/features/DisplayFont/ui/FontSampler/FontSampler.svelte

@@ -86,7 +86,8 @@ function removeSample() {
     </div>
 
     <div class="p-8 relative z-10">
-        <FontApplicator id={font.id} name={font.name}>
+        <!-- TODO: Fix this ! -->
+        <FontApplicator id={font.id} name={font.name} url={font.styles.regular!}>
             <ContentEditable
                 bind:text={text}
                 {...restProps}

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

@@ -2,15 +2,13 @@
     Component: Labels
     Displays labels for font selection in the comparison slider.
 -->
-<script lang="ts" generics="T extends { name: string; id: string }">
+<script lang="ts" generics="T extends UnifiedFont">
 import {
     FontVirtualList,
     type UnifiedFont,
     unifiedFontStore,
 } from '$entities/Font';
 import FontApplicator from '$entities/Font/ui/FontApplicator/FontApplicator.svelte';
-import { displayedFontsStore } from '$features/DisplayFont';
-import { buttonVariants } from '$shared/shadcn/ui/button';
 import {
     Content as SelectContent,
     Item as SelectItem,
@@ -18,6 +16,7 @@ import {
     Trigger as SelectTrigger,
 } from '$shared/shadcn/ui/select';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import { comparisonStore } from '$widgets/ComparisonSlider/model';
 
 interface Props<T> {
     /**
@@ -32,33 +31,36 @@ interface Props<T> {
      * Position of the slider
      */
     sliderPos: number;
-}
-let { fontA, fontB, sliderPos }: Props<T> = $props();
 
-const fontList = $derived(
-    // displayedFontsStore.fonts.filter(font => font.name !== fontA.name && font.name !== fontB.name),
-    unifiedFontStore.fonts,
-);
+    weight: number;
+}
+let { fontA, fontB, sliderPos, weight }: Props<T> = $props();
+
+const fontList = $derived(unifiedFontStore.fonts);
 
 function selectFontA(font: UnifiedFont) {
     if (!font) return;
-    displayedFontsStore.fontA = font;
+    comparisonStore.fontA = font;
 }
 
 function selectFontB(font: UnifiedFont) {
     if (!font) return;
-    displayedFontsStore.fontB = font;
+    comparisonStore.fontB = font;
 }
 </script>
 
 {#snippet fontSelector(
     name: string,
     id: string,
+    url: string,
     fonts: UnifiedFont[],
     selectFont: (font: UnifiedFont) => void,
     align: 'start' | 'end',
 )}
-    <div class="z-50 pointer-events-auto" onpointerdown={(e => e.stopPropagation())}>
+    <div
+        class="z-50 pointer-events-auto"
+        onpointerdown={(e => e.stopPropagation())}
+    >
         <SelectRoot type="single" disabled={!fontList.length}>
             <SelectTrigger
                 class={cn(
@@ -69,7 +71,7 @@ function selectFontB(font: UnifiedFont) {
                 )}
             >
                 <div class="text-left flex-1 min-w-0">
-                    <FontApplicator name={name} id={id}>
+                    <FontApplicator {name} {id} {url}>
                         {name}
                     </FontApplicator>
                 </div>
@@ -80,12 +82,12 @@ function selectFontB(font: UnifiedFont) {
                     'w-52 max-h-[280px] overflow-hidden rounded-lg',
                 )}
                 side="top"
-                align={align}
+                {align}
                 sideOffset={8}
                 size="small"
             >
                 <div class="p-1.5">
-                    <FontVirtualList items={fonts}>
+                    <FontVirtualList items={fonts} {weight}>
                         {#snippet children({ item: font })}
                             {@const handleClick = () => selectFont(font)}
                             <SelectItem
@@ -93,7 +95,7 @@ function selectFontB(font: UnifiedFont) {
                                 class="data-[highlighted]:bg-gray-100 font-mono text-[11px] px-3 py-2.5 rounded-md cursor-pointer transition-colors"
                                 onclick={handleClick}
                             >
-                                <FontApplicator name={font.name} id={font.id}>
+                                <FontApplicator name={font.name} id={font.id} url={font.styles.regular!}>
                                     {font.name}
                                 </FontApplicator>
                             </SelectItem>
@@ -118,7 +120,14 @@ function selectFontB(font: UnifiedFont) {
                 ch_01
             </span>
         </div>
-        {@render fontSelector(fontB.name, fontB.id, fontList, selectFontB, 'start')}
+        {@render fontSelector(
+    fontB.name,
+    fontB.id,
+    fontB.styles.regular!,
+    fontList,
+    selectFontB,
+    'start',
+)}
     </div>
 
     <div
@@ -133,6 +142,13 @@ function selectFontB(font: UnifiedFont) {
             <div class="w-px h-2.5 bg-gray-300/60"></div>
             <div class="w-1.5 h-1.5 rounded-full bg-gray-900 shadow-[0_0_6px_rgba(0,0,0,0.4)]"></div>
         </div>
-        {@render fontSelector(fontA.name, fontA.id, fontList, selectFontA, 'end')}
+        {@render fontSelector(
+    fontA.name,
+    fontA.id,
+    fontA.styles.regular!,
+    fontList,
+    selectFontA,
+    'end',
+)}
     </div>
 </div>