Use Inter variable font (#5540)

src/alf/fonts.ts

@@ -40,31 +40,10 @@ export function applyFonts(
   fontFamily: 'system' | 'theme',
 ) {
   if (fontFamily === 'theme') {
-    style.fontFamily =
-      {
-        // '100': 'Inter-Thin',
-        // '200': 'Inter-ExtraLight',
-        // '300': 'Inter-Light',
-        // '500': 'Inter-Medium',
-        // '700': 'Inter-Bold',
-        // '900': 'Inter-Black',
-        '100': 'Inter-Regular',
-        '200': 'Inter-Regular',
-        '300': 'Inter-Regular',
-        '400': 'Inter-Regular',
-        '500': 'Inter-SemiBold',
-        '600': 'Inter-SemiBold',
-        '700': 'Inter-SemiBold',
-        '800': 'Inter-ExtraBold',
-        '900': 'Inter-ExtraBold',
-      }[style.fontWeight as string] || 'Inter-Regular'
+    style.fontFamily = 'InterVariable'
 
     if (style.fontStyle === 'italic') {
-      if (style.fontFamily === 'Inter-Regular') {
-        style.fontFamily = 'Inter-Italic'
-      } else {
-        style.fontFamily += 'Italic'
-      }
+      style.fontFamily += 'Italic'
     }
 
     // fallback families only supported on web