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>

26 files changed, 10 insertions, 12 deletions

diff --git a/app.config.js b/app.config.js
index 895c4a6ef..8b288e1a7 100644
--- 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
new file mode 100644
index 000000000..2e73dce34
--- /dev/null
+++ b/assets/fonts/inter/Inter-Black.woff2
Binary files differdiff --git a/assets/fonts/inter/Inter-BlackItalic.woff2 b/assets/fonts/inter/Inter-BlackItalic.woff2
new file mode 100644
index 000000000..d85db9313
--- /dev/null
+++ b/assets/fonts/inter/Inter-BlackItalic.woff2
Binary files differdiff --git a/assets/fonts/inter/Inter-Bold.woff2 b/assets/fonts/inter/Inter-Bold.woff2
new file mode 100644
index 000000000..b9e3cb3b1
--- /dev/null
+++ b/assets/fonts/inter/Inter-Bold.woff2
Binary files differdiff --git a/assets/fonts/inter/Inter-BoldItalic.woff2 b/assets/fonts/inter/Inter-BoldItalic.woff2
new file mode 100644
index 000000000..31cd05221
--- /dev/null
+++ b/assets/fonts/inter/Inter-BoldItalic.woff2
Binary files differdiff --git a/assets/fonts/inter/Inter-ExtraBold.woff2 b/assets/fonts/inter/Inter-ExtraBold.woff2
new file mode 100644
index 000000000..bbd000698
--- /dev/null
+++ b/assets/fonts/inter/Inter-ExtraBold.woff2
Binary files differdiff --git a/assets/fonts/inter/Inter-ExtraBoldItalic.woff2 b/assets/fonts/inter/Inter-ExtraBoldItalic.woff2
new file mode 100644
index 000000000..288f2de2a
--- /dev/null
+++ b/assets/fonts/inter/Inter-ExtraBoldItalic.woff2
Binary files differdiff --git a/assets/fonts/inter/Inter-ExtraLight.woff2 b/assets/fonts/inter/Inter-ExtraLight.woff2
new file mode 100644
index 000000000..f69100372
--- /dev/null
+++ b/assets/fonts/inter/Inter-ExtraLight.woff2
Binary files differdiff --git a/assets/fonts/inter/Inter-ExtraLightItalic.woff2 b/assets/fonts/inter/Inter-ExtraLightItalic.woff2
new file mode 100644
index 000000000..3e3934d16
--- /dev/null
+++ b/assets/fonts/inter/Inter-ExtraLightItalic.woff2
Binary files differdiff --git a/assets/fonts/inter/Inter-Italic.woff2 b/assets/fonts/inter/Inter-Italic.woff2
new file mode 100644
index 000000000..9a1ad2167
--- /dev/null
+++ b/assets/fonts/inter/Inter-Italic.woff2
Binary files differdiff --git a/assets/fonts/inter/Inter-Light.woff2 b/assets/fonts/inter/Inter-Light.woff2
new file mode 100644
index 000000000..f3e012a45
--- /dev/null
+++ b/assets/fonts/inter/Inter-Light.woff2
Binary files differdiff --git a/assets/fonts/inter/Inter-LightItalic.woff2 b/assets/fonts/inter/Inter-LightItalic.woff2
new file mode 100644
index 000000000..2f370090f
--- /dev/null
+++ b/assets/fonts/inter/Inter-LightItalic.woff2
Binary files differdiff --git a/assets/fonts/inter/Inter-Medium.woff2 b/assets/fonts/inter/Inter-Medium.woff2
new file mode 100644
index 000000000..fdfdcc699
--- /dev/null
+++ b/assets/fonts/inter/Inter-Medium.woff2
Binary files differdiff --git a/assets/fonts/inter/Inter-MediumItalic.woff2 b/assets/fonts/inter/Inter-MediumItalic.woff2
new file mode 100644
index 000000000..0dc5a3068
--- /dev/null
+++ b/assets/fonts/inter/Inter-MediumItalic.woff2
Binary files differdiff --git a/assets/fonts/inter/Inter-Regular.woff2 b/assets/fonts/inter/Inter-Regular.woff2
new file mode 100644
index 000000000..2bcd222ec
--- /dev/null
+++ b/assets/fonts/inter/Inter-Regular.woff2
Binary files differdiff --git a/assets/fonts/inter/Inter-SemiBold.woff2 b/assets/fonts/inter/Inter-SemiBold.woff2
new file mode 100644
index 000000000..fbae113d2
--- /dev/null
+++ b/assets/fonts/inter/Inter-SemiBold.woff2
Binary files differdiff --git a/assets/fonts/inter/Inter-SemiBoldItalic.woff2 b/assets/fonts/inter/Inter-SemiBoldItalic.woff2
new file mode 100644
index 000000000..d67d01c6c
--- /dev/null
+++ b/assets/fonts/inter/Inter-SemiBoldItalic.woff2
Binary files differdiff --git a/assets/fonts/inter/Inter-Thin.woff2 b/assets/fonts/inter/Inter-Thin.woff2
new file mode 100644
index 000000000..83bf54be3
--- /dev/null
+++ b/assets/fonts/inter/Inter-Thin.woff2
Binary files differdiff --git a/assets/fonts/inter/Inter-ThinItalic.woff2 b/assets/fonts/inter/Inter-ThinItalic.woff2
new file mode 100644
index 000000000..928da4b37
--- /dev/null
+++ b/assets/fonts/inter/Inter-ThinItalic.woff2
Binary files differdiff --git a/assets/fonts/inter/InterVariable-Italic.woff2 b/assets/fonts/inter/InterVariable-Italic.woff2
new file mode 100644
index 000000000..b3530f3f5
--- /dev/null
+++ b/assets/fonts/inter/InterVariable-Italic.woff2
Binary files differdiff --git a/assets/fonts/inter/InterVariable.woff2 b/assets/fonts/inter/InterVariable.woff2
new file mode 100644
index 000000000..5a8d3e72a
--- /dev/null
+++ b/assets/fonts/inter/InterVariable.woff2
Binary files differdiff --git a/bskyweb/static/media/InterVariable-Italic.01dcbad1bac635f9c9cd.woff2 b/bskyweb/static/media/InterVariable-Italic.01dcbad1bac635f9c9cd.woff2
new file mode 100644
index 000000000..b3530f3f5
--- /dev/null
+++ b/bskyweb/static/media/InterVariable-Italic.01dcbad1bac635f9c9cd.woff2
Binary files differdiff --git a/bskyweb/static/media/InterVariable.c504db5c06caaf7cdfba.woff2 b/bskyweb/static/media/InterVariable.c504db5c06caaf7cdfba.woff2
new file mode 100644
index 000000000..5a8d3e72a
--- /dev/null
+++ b/bskyweb/static/media/InterVariable.c504db5c06caaf7cdfba.woff2
Binary files differdiff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
index 8eb78fffd..1ddd29171 100644
--- 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
index 70bdc285b..0379eccef 100644
--- 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
index 293f366ad..8bde07d2b 100644
--- 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;