Use Inter variable font

app.config.js

@@ -234,24 +234,8 @@ module.exports = function (config) {
           'expo-font',
           {
             fonts: [
-              // './assets/fonts/inter/Inter-Thin.otf',
-              // './assets/fonts/inter/Inter-ThinItalic.otf',
-              // './assets/fonts/inter/Inter-ExtraLight.otf',
-              // './assets/fonts/inter/Inter-ExtraLightItalic.otf',
-              // './assets/fonts/inter/Inter-Light.otf',
-              // './assets/fonts/inter/Inter-LightItalic.otf',
-              './assets/fonts/inter/Inter-Regular.otf',
-              './assets/fonts/inter/Inter-Italic.otf',
-              './assets/fonts/inter/Inter-Medium.otf',
-              './assets/fonts/inter/Inter-MediumItalic.otf',
-              './assets/fonts/inter/Inter-SemiBold.otf',
-              './assets/fonts/inter/Inter-SemiBoldItalic.otf',
-              './assets/fonts/inter/Inter-Bold.otf',
-              './assets/fonts/inter/Inter-BoldItalic.otf',
-              './assets/fonts/inter/Inter-ExtraBold.otf',
-              './assets/fonts/inter/Inter-ExtraBoldItalic.otf',
-              './assets/fonts/inter/Inter-Black.otf',
-              './assets/fonts/inter/Inter-BlackItalic.otf',
+              './assets/fonts/inter/InterVariable.ttf',
+              './assets/fonts/inter/InterVariable-Italic.ttf',
             ],
           },
         ],

bskyweb/templates/base.html

@@ -13,24 +13,8 @@
 
   <!-- Hello Humans! API docs at https://atproto.com -->
 
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf">
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Italic.95778eb0c75dc956257e.otf">
-  <!--
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Medium.296aa2d65964269836b3.otf">
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf">
-  -->
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBold.2277990330981b8409bb.otf">
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf">
-  <!--
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Bold.8d330503e1d034ad68de.otf">
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf">
-  -->
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf">
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf">
-  <!--
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Black.66e9a87f1c921e844ed4.otf">
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf">
-  -->
+  <link rel="preload" as="font" type="font/ttf" href="/static/media/InterVariable.c9f788f6e7ebaec75d7c.ttf">
+  <link rel="preload" as="font" type="font/ttf" href="/static/media/InterVariable-Italic.55d6a3f35e9b605ba6f4.ttf">
 
   <style>
     /**
@@ -53,7 +37,7 @@
     body {
       margin: 0px;
       padding: 0px;
-      font-family: 'Inter-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
+      font-family: InterVariable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
       text-rendering: optimizeLegibility;
       /* Platform-specific reset */
       -webkit-overflow-scrolling: touch;

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

src/style.css

@@ -7,101 +7,21 @@
  */
 
 @font-face {
-  font-family: 'Inter-Regular';
-  src: local('Inter-Regular'),
-    url(/assets/fonts/inter/Inter-Regular.otf) format('opentype');
-  font-weight: 400;
+  font-family: 'InterVariable';
+  src: local('InterVariable'),
+    url(/assets/fonts/inter/InterVariable.ttf) format('truetype');
+  font-weight: 300 1000;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
-  font-family: 'Inter-Italic';
-  src: local('Inter-Italic'),
-    url(/assets/fonts/inter/Inter-Italic.otf) format('opentype');
-  font-weight: 400;
+  font-family: 'InterVariableItalic';
+  src: local('InterVariableItalic'),
+    url(/assets/fonts/inter/InterVariable-Italic.ttf) format('truetype');
+  font-weight: 300 1000;
   font-style: italic;
   font-display: swap;
 }
-/*
-@font-face {
-  font-family: "Inter-Medium";
-  src: local("Inter-Medium"), url(/assets/fonts/inter/Inter-Medium.otf) format("opentype");
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Inter-MediumItalic";
-  src: local("Inter-MediumItalic"), url(/assets/fonts/inter/Inter-MediumItalic.otf) format("opentype");
-  font-weight: 500;
-  font-style: italic;
-  font-display: swap;
-}
-*/
-@font-face {
-  font-family: 'Inter-SemiBold';
-  src: local('Inter-SemiBold'),
-    url(/assets/fonts/inter/Inter-SemiBold.otf) format('opentype');
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: 'Inter-SemiBoldItalic';
-  src: local('Inter-SemiBoldItalic'),
-    url(/assets/fonts/inter/Inter-SemiBoldItalic.otf) format('opentype');
-  font-weight: 600;
-  font-style: italic;
-  font-display: swap;
-}
-/*
-@font-face {
-  font-family: "Inter-Bold";
-  src: local("Inter-Bold"), url(/assets/fonts/inter/Inter-Bold.otf) format("opentype");
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Inter-BoldItalic";
-  src: local("Inter-BoldItalic"), url(/assets/fonts/inter/Inter-BoldItalic.otf) format("opentype");
-  font-weight: 700;
-  font-style: italic;
-  font-display: swap;
-}
-*/
-@font-face {
-  font-family: 'Inter-ExtraBold';
-  src: local('Inter-ExtraBold'),
-    url(/assets/fonts/inter/Inter-ExtraBold.otf) format('opentype');
-  font-weight: 800;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: 'Inter-ExtraBoldItalic';
-  src: local('Inter-ExtraBoldItalic'),
-    url(/assets/fonts/inter/Inter-ExtraBoldItalic.otf) format('opentype');
-  font-weight: 800;
-  font-style: italic;
-  font-display: swap;
-}
-/*
-@font-face {
-  font-family: "Inter-Black";
-  src: local("Inter-Black"), url(/assets/fonts/inter/Inter-Black.otf) format("opentype");
-  font-weight: 900;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Inter-BlackItalic";
-  src: local("Inter-BlackItalic"), url(/assets/fonts/inter/Inter-BlackItalic.otf) format("opentype");
-  font-weight: 900;
-  font-style: italic;
-  font-display: swap;
-}
-*/
 
 /**
  * BEGIN STYLES

web/index.html

@@ -18,24 +18,8 @@
     <link rel="preconnect" href="https://bsky.network">
     <title>%WEB_TITLE%</title>
 
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf">
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Italic.95778eb0c75dc956257e.otf">
-    <!--
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Medium.296aa2d65964269836b3.otf">
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf">
-    -->
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBold.2277990330981b8409bb.otf">
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf">
-    <!--
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Bold.8d330503e1d034ad68de.otf">
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf">
-    -->
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf">
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf">
-    <!--
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Black.66e9a87f1c921e844ed4.otf">
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf">
-    -->
+    <link rel="preload" as="font" type="font/ttf" href="/static/media/InterVariable.c9f788f6e7ebaec75d7c.ttf">
+    <link rel="preload" as="font" type="font/ttf" href="/static/media/InterVariable-Italic.55d6a3f35e9b605ba6f4.ttf">
 
     <style>
       /**
@@ -58,7 +42,7 @@
       body {
         margin: 0px;
         padding: 0px;
-        font-family: 'Inter-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
+        font-family: InterVariable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
         text-rendering: optimizeLegibility;
         /* Platform-specific reset */
         -webkit-overflow-scrolling: touch;