Font loading improvements (#6993)

* Font loading improvements * Reconvert with missing files * Update bskyweb/templates/base.html Co-authored-by: Rick Viscomi <[email protected]> * Update bskyweb/templates/base.html Co-authored-by: Rick Viscomi <[email protected]> * Run web-build to update hashes * Revert Android to otf * Use Inter woff2 files --------- Co-authored-by: Rick Viscomi <[email protected]>
bluesky-social · Dec 10, 2024 · bee50c3 · bee50c3
1 parent 6308e91
commit bee50c3
Show file tree

Hide file tree

Showing 26 changed files with 10 additions and 12 deletions.
diff --git a/app.config.js b/app.config.js
@@ -234,8 +234,8 @@ module.exports = function (config) {
           'expo-font',
           {
             fonts: [
-              './assets/fonts/inter/InterVariable.ttf',
-              './assets/fonts/inter/InterVariable-Italic.ttf',
+              './assets/fonts/inter/InterVariable.woff2',
+              './assets/fonts/inter/InterVariable-Italic.woff2',
               // Android only
               './assets/fonts/inter/Inter-Regular.otf',
               './assets/fonts/inter/Inter-Italic.otf',

diff --git a/assets/fonts/inter/Inter-Black.woff2 b/assets/fonts/inter/Inter-Black.woff2
diff --git a/assets/fonts/inter/Inter-BlackItalic.woff2 b/assets/fonts/inter/Inter-BlackItalic.woff2
diff --git a/assets/fonts/inter/Inter-Bold.woff2 b/assets/fonts/inter/Inter-Bold.woff2
diff --git a/assets/fonts/inter/Inter-BoldItalic.woff2 b/assets/fonts/inter/Inter-BoldItalic.woff2
diff --git a/assets/fonts/inter/Inter-ExtraBold.woff2 b/assets/fonts/inter/Inter-ExtraBold.woff2
diff --git a/assets/fonts/inter/Inter-ExtraBoldItalic.woff2 b/assets/fonts/inter/Inter-ExtraBoldItalic.woff2
diff --git a/assets/fonts/inter/Inter-ExtraLight.woff2 b/assets/fonts/inter/Inter-ExtraLight.woff2
diff --git a/assets/fonts/inter/Inter-ExtraLightItalic.woff2 b/assets/fonts/inter/Inter-ExtraLightItalic.woff2
diff --git a/assets/fonts/inter/Inter-Italic.woff2 b/assets/fonts/inter/Inter-Italic.woff2
diff --git a/assets/fonts/inter/Inter-Light.woff2 b/assets/fonts/inter/Inter-Light.woff2
diff --git a/assets/fonts/inter/Inter-LightItalic.woff2 b/assets/fonts/inter/Inter-LightItalic.woff2
diff --git a/assets/fonts/inter/Inter-Medium.woff2 b/assets/fonts/inter/Inter-Medium.woff2
diff --git a/assets/fonts/inter/Inter-MediumItalic.woff2 b/assets/fonts/inter/Inter-MediumItalic.woff2
diff --git a/assets/fonts/inter/Inter-Regular.woff2 b/assets/fonts/inter/Inter-Regular.woff2
diff --git a/assets/fonts/inter/Inter-SemiBold.woff2 b/assets/fonts/inter/Inter-SemiBold.woff2
diff --git a/assets/fonts/inter/Inter-SemiBoldItalic.woff2 b/assets/fonts/inter/Inter-SemiBoldItalic.woff2
diff --git a/assets/fonts/inter/Inter-Thin.woff2 b/assets/fonts/inter/Inter-Thin.woff2
diff --git a/assets/fonts/inter/Inter-ThinItalic.woff2 b/assets/fonts/inter/Inter-ThinItalic.woff2
diff --git a/assets/fonts/inter/InterVariable-Italic.woff2 b/assets/fonts/inter/InterVariable-Italic.woff2
diff --git a/assets/fonts/inter/InterVariable.woff2 b/assets/fonts/inter/InterVariable.woff2
diff --git a/bskyweb/static/media/InterVariable-Italic.01dcbad1bac635f9c9cd.woff2 b/bskyweb/static/media/InterVariable-Italic.01dcbad1bac635f9c9cd.woff2
diff --git a/bskyweb/static/media/InterVariable.c504db5c06caaf7cdfba.woff2 b/bskyweb/static/media/InterVariable.c504db5c06caaf7cdfba.woff2
diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
@@ -13,8 +13,7 @@
 
   <!-- Hello Humans! API docs at https://atproto.com -->
 
-  <link rel="preload" as="font" type="font/ttf" href="{{ staticCDNHost }}/static/media/InterVariable.c9f788f6e7ebaec75d7c.ttf">
-  <link rel="preload" as="font" type="font/ttf" href="{{ staticCDNHost }}/static/media/InterVariable-Italic.55d6a3f35e9b605ba6f4.ttf">
+  <link rel="preload" as="font" type="font/ttf" href="{{ staticCDNHost }}/static/media/InterVariable.c504db5c06caaf7cdfba.woff2">
 
   <style>
     /**
@@ -26,14 +25,14 @@
      */
     @font-face {
       font-family: 'InterVariable';
-      src: url("{{ staticCDNHost }}/static/media/InterVariable.c9f788f6e7ebaec75d7c.ttf") format('truetype');
+      src: url("{{ staticCDNHost }}/static/media/InterVariable.c504db5c06caaf7cdfba.woff2") format('woff2');
       font-weight: 300 1000;
       font-style: normal;
       font-display: swap;
     }
     @font-face {
       font-family: 'InterVariableItalic';
-      src: url("{{ staticCDNHost }}/static/media/InterVariable-Italic.55d6a3f35e9b605ba6f4.ttf") format('truetype');
+      src: url("{{ staticCDNHost }}/static/media/InterVariable-Italic.01dcbad1bac635f9c9cd.woff2") format('woff2');
       font-weight: 300 1000;
       font-style: italic;
       font-display: swap;

diff --git a/src/alf/util/unusedUseFonts.ts b/src/alf/util/unusedUseFonts.ts
@@ -9,7 +9,7 @@ import {useFonts} from 'expo-font'
  */
 export function DO_NOT_USE() {
   return useFonts({
-    InterVariable: require('../../../assets/fonts/inter/InterVariable.ttf'),
-    'InterVariable-Italic': require('../../../assets/fonts/inter/InterVariable-Italic.ttf'),
+    InterVariable: require('../../../assets/fonts/inter/InterVariable.woff2'),
+    'InterVariable-Italic': require('../../../assets/fonts/inter/InterVariable-Italic.woff2'),
   })
 }
diff --git a/web/index.html b/web/index.html
@@ -18,8 +18,7 @@
     <link rel="preconnect" href="https://bsky.network">
     <title>%WEB_TITLE%</title>
 
-    <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">
+    <link rel="preload" as="font" type="font/woff2" href="/static/media/InterVariable.c504db5c06caaf7cdfba.woff2" crossorigin>
 
     <style>
       /**
@@ -31,14 +30,14 @@
        */
       @font-face {
         font-family: 'InterVariable';
-        src: url(/static/media/InterVariable.c9f788f6e7ebaec75d7c.ttf) format('truetype');
+        src: url(/static/media/InterVariable.c504db5c06caaf7cdfba.woff2) format('woff2');
         font-weight: 300 1000;
         font-style: normal;
         font-display: swap;
       }
       @font-face {
         font-family: 'InterVariableItalic';
-        src: url(/static/media/InterVariable-Italic.55d6a3f35e9b605ba6f4.ttf) format('truetype');
+        src: url(/static/media/InterVariable-Italic.01dcbad1bac635f9c9cd.woff2) format('woff2');
         font-weight: 300 1000;
         font-style: italic;
         font-display: swap;