Font loading improvements (#6993)

* Font loading improvements

* Reconvert with missing files

* Update bskyweb/templates/base.html

Co-authored-by: Rick Viscomi <rviscomi@users.noreply.github.com>

* Update bskyweb/templates/base.html

Co-authored-by: Rick Viscomi <rviscomi@users.noreply.github.com>

* Run web-build to update hashes

* Revert Android to otf

* Use Inter woff2 files

---------

Co-authored-by: Rick Viscomi <rviscomi@users.noreply.github.com>

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',

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;

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'),
   })
 }

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;