style(ui): polished typography and switched webfonts to woff2

- Switched bundled browser font references from TTF to WOFF2 and enabled optical sizing.
- Refined heading hierarchy, text wrapping, mobile controls, and numeric alignment.
- Polished notification badges, button underlines, and ligature rendering.

apps/remix/app/components/general/settings-header.tsx

@@ -13,10 +13,12 @@ export const SettingsHeader = ({ children, title, subtitle, className, hideDivid
   return (
     <>
       <div className={cn('mb-4 flex flex-row items-center justify-between', className)}>
-        <div>
-          <h2 className="font-bold text-xl">{title}</h2>
+        <div className="min-w-0">
+          <h2 className="font-bold text-xl leading-tight [text-wrap:balance]">{title}</h2>
 
-          <p className="text-muted-foreground text-sm md:mt-2">{subtitle}</p>
+          <p className="mt-1 max-w-[65ch] text-muted-foreground text-sm leading-normal [overflow-wrap:break-word] [text-wrap:pretty] md:mt-2">
+            {subtitle}
+          </p>
         </div>
 
         {children}