diff --git a/src/features/SetupFont/ui/TypographyMenu.svelte b/src/features/SetupFont/ui/TypographyMenu.svelte
index 08c97ac..631eff9 100644
--- a/src/features/SetupFont/ui/TypographyMenu.svelte
+++ b/src/features/SetupFont/ui/TypographyMenu.svelte
@@ -28,9 +28,10 @@ import {
 
 interface Props {
     class?: string;
+    hidden?: boolean;
 }
 
-const { class: className }: Props = $props();
+const { class: className, hidden = false }: Props = $props();
 const responsive = getContext<ResponsiveManager>('responsive');
 
 const [send, receive] = crossfade({
@@ -71,7 +72,7 @@ $effect(() => {
 </script>
 
 <div
-    class={cn('w-auto max-screen z-10 flex justify-center', className)}
+    class={cn('w-auto max-screen z-10 flex justify-center', hidden && 'hidden', className)}
     in:receive={{ key: 'panel' }}
     out:send={{ key: 'panel' }}
 >