diff --git a/apps/web/src/routes/_view/brand.tsx b/apps/web/src/routes/_view/brand.tsx
index 675d4569c9..e53657da2a 100644
--- a/apps/web/src/routes/_view/brand.tsx
+++ b/apps/web/src/routes/_view/brand.tsx
@@ -83,7 +83,7 @@ const TYPOGRAPHY = [
   {
     id: "display-font",
     name: "Lora",
-    fontFamily: "Lora, serif",
+    fontFamily: "Lora",
     description:
       "Lora is our display typeface for headlines and featured text. Adds elegance and personality.",
     preview: "The quick brown fox jumps over the lazy dog",
@@ -350,7 +350,12 @@ function TypographyGrid({
             >
               Aa
             </div>
-            <div className="font-medium text-stone-600">{font.name}</div>
+            <div
+              className="font-medium text-stone-600"
+              style={{ fontFamily: font.fontFamily }}
+            >
+              {font.name}
+            </div>
           </button>
         ))}
       </div>
@@ -439,7 +444,7 @@ function MobileSidebarDrawer({
             initial={{ x: "-100%" }}
             animate={{ x: 0 }}
             exit={{ x: "-100%" }}
-            transition={{ type: "spring", damping: 25, stiffness: 300 }}
+            transition={{ type: "tween", duration: 0.2, ease: "easeOut" }}
           >
             <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 bg-stone-50">
               <span className="text-sm font-medium text-stone-600">
@@ -620,10 +625,16 @@ function TypographySidebar({
               Aa
             </div>
             <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium text-stone-600 truncate">
+              <p
+                className="text-sm font-medium text-stone-600 truncate"
+                style={{ fontFamily: font.fontFamily }}
+              >
                 {font.name}
               </p>
-              <p className="text-xs text-neutral-500 truncate">
+              <p
+                className="text-xs text-neutral-500 truncate"
+                style={{ fontFamily: font.fontFamily }}
+              >
                 {font.fontFamily}
               </p>
             </div>