Rely on font-face and preload tags for font loading (#5431)

bskyweb/templates/base.html

@@ -13,7 +13,105 @@
 
   <!-- 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">
+
   <style>
+    @font-face {
+      font-family: "Inter-Regular";
+      src: local("Inter-Regular"), url(/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf) format("font/otf");
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: "Inter-Italic";
+      src: local("Inter-Italic"), url(/static/media/Inter-Italic.95778eb0c75dc956257e.otf) format("font/otf");
+      font-weight: 400;
+      font-style: italic;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: "Inter-Medium";
+      src: local("Inter-Medium"), url(/static/media/Inter-Medium.296aa2d65964269836b3.otf) format("font/otf");
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: "Inter-MediumItalic";
+      src: local("Inter-MediumItalic"), url(/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf) format("font/otf");
+      font-weight: 500;
+      font-style: italic;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: "Inter-SemiBold";
+      src: local("Inter-SemiBold"), url(/static/media/Inter-SemiBold.2277990330981b8409bb.otf) format("font/otf");
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: "Inter-SemiBoldItalic";
+      src: local("Inter-SemiBoldItalic"), url(/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf) format("font/otf");
+      font-weight: 600;
+      font-style: italic;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: "Inter-Bold";
+      src: local("Inter-Bold"), url(/static/media/Inter-Bold.8d330503e1d034ad68de.otf) format("font/otf");
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: "Inter-BoldItalic";
+      src: local("Inter-BoldItalic"), url(/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf) format("font/otf");
+      font-weight: 700;
+      font-style: italic;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: "Inter-ExtraBold";
+      src: local("Inter-ExtraBold"), url(/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf) format("font/otf");
+      font-weight: 800;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: "Inter-ExtraBoldItalic";
+      src: local("Inter-ExtraBoldItalic"), url(/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf) format("font/otf");
+      font-weight: 800;
+      font-style: italic;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: "Inter-Black";
+      src: local("Inter-Black"), url(/static/media/Inter-Black.66e9a87f1c921e844ed4.otf) format("font/otf");
+      font-weight: 900;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: "Inter-BlackItalic";
+      src: local("Inter-BlackItalic"), url(/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf) format("font/otf");
+      font-weight: 900;
+      font-style: italic;
+      font-display: swap;
+    }
+
     /**
      * Extend the react-native-web reset:
      * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
@@ -315,133 +413,6 @@
   <meta property="og:site_name" content="Bluesky Social" />
   <link type="application/activity+json" href="" />
 
-  <script>
-    try {
-      const InterRegular = new FontFace(
-        'Inter-Regular',
-        'url(/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf)',
-        {
-          style: 'normal',
-          weight: 400,
-        }
-      );
-      const InterItalic = new FontFace(
-        'Inter-Italic',
-        'url(/static/media/Inter-Italic.95778eb0c75dc956257e.otf)',
-        {
-          style: 'italic',
-          weight: 400,
-        }
-      );
-      const InterMedium = new FontFace(
-        'Inter-Medium',
-        'url(/static/media/Inter-Medium.296aa2d65964269836b3.otf)',
-        {
-          style: 'normal',
-          weight: 500,
-        }
-      );
-      const InterMediumItalic = new FontFace(
-        'Inter-MediumItalic',
-        'url(/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf)',
-        {
-          style: 'italic',
-          weight: 500,
-        }
-      );
-      const InterSemiBold = new FontFace(
-        'Inter-SemiBold',
-        'url(/static/media/Inter-SemiBold.2277990330981b8409bb.otf)',
-        {
-          style: 'normal',
-          weight: 600,
-        }
-      );
-      const InterSemiBoldItalic = new FontFace(
-        'Inter-SemiBoldItalic',
-        'url(/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf)',
-        {
-          style: 'italic',
-          weight: 600,
-        }
-      );
-      const InterBold = new FontFace(
-        'Inter-Bold',
-        'url(/static/media/Inter-Bold.8d330503e1d034ad68de.otf)',
-        {
-          style: 'normal',
-          weight: 700,
-        }
-      );
-      const InterBoldItalic = new FontFace(
-        'Inter-BoldItalic',
-        'url(/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf)',
-        {
-          style: 'italic',
-          weight: 700,
-        }
-      );
-      const InterExtraBold = new FontFace(
-        'Inter-ExtraBold',
-        'url(/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf)',
-        {
-          style: 'normal',
-          weight: 800,
-        }
-      );
-      const InterExtraBoldItalic = new FontFace(
-        'Inter-ExtraBoldItalic',
-        'url(/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf)',
-        {
-          style: 'italic',
-          weight: 800,
-        }
-      );
-      const InterBlack = new FontFace(
-        'Inter-Black',
-        'url(/static/media/Inter-Black.66e9a87f1c921e844ed4.otf)',
-        {
-          style: 'normal',
-          weight: 900,
-        }
-      );
-      const InterBlackItalic = new FontFace(
-        'Inter-BlackItalic',
-        'url(/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf)',
-        {
-          style: 'italic',
-          weight: 900,
-        }
-      );
-
-      document.fonts.add(InterRegular);
-      document.fonts.add(InterItalic);
-      document.fonts.add(InterMedium);
-      document.fonts.add(InterMediumItalic);
-      document.fonts.add(InterSemiBold);
-      document.fonts.add(InterSemiBoldItalic);
-      document.fonts.add(InterBold);
-      document.fonts.add(InterBoldItalic);
-      document.fonts.add(InterExtraBold);
-      document.fonts.add(InterExtraBoldItalic);
-      document.fonts.add(InterBlack);
-      document.fonts.add(InterBlackItalic);
-
-      InterRegular.load();
-      InterItalic.load();
-      InterMedium.load();
-      InterMediumItalic.load();
-      InterSemiBold.load();
-      InterSemiBoldItalic.load();
-      InterBold.load();
-      InterBoldItalic.load();
-      InterExtraBold.load();
-      InterExtraBoldItalic.load();
-      InterBlack.load();
-      InterBlackItalic.load();
-    } catch (e) {}
-  </script>
-
   {% block html_head_extra -%}{%- endblock %}
 </head>
 <body>

src/App.native.tsx

@@ -57,7 +57,6 @@ import * as Toast from '#/view/com/util/Toast'
 import {Shell} from '#/view/shell'
 import {ThemeProvider as Alf} from '#/alf'
 import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
-import {useFonts} from '#/alf/util/useFonts'
 import {NuxDialogs} from '#/components/dialogs/nuxs'
 import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
 import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'
@@ -154,13 +153,12 @@ function InnerApp() {
 
 function App() {
   const [isReady, setReady] = useState(false)
-  const [loaded] = useFonts()
 
   React.useEffect(() => {
     initPersistedState().then(() => setReady(true))
   }, [])
 
-  if (!isReady || !loaded) {
+  if (!isReady) {
     return null
   }
 

src/App.web.tsx

@@ -48,7 +48,6 @@ import {ToastContainer} from '#/view/com/util/Toast.web'
 import {Shell} from '#/view/shell/index'
 import {ThemeProvider as Alf} from '#/alf'
 import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
-import {useFonts} from '#/alf/util/useFonts'
 import {NuxDialogs} from '#/components/dialogs/nuxs'
 import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
 import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'
@@ -145,13 +144,12 @@ function InnerApp() {
 
 function App() {
   const [isReady, setReady] = useState(false)
-  const [loaded] = useFonts()
 
   React.useEffect(() => {
     initPersistedState().then(() => setReady(true))
   }, [])
 
-  if (!isReady || !loaded) {
+  if (!isReady) {
     return null
   }
 

src/alf/util/useFonts.ts

@@ -1,8 +0,0 @@
-export function useFonts() {
-  /**
-   * For native, the `expo-font` config plugin embeds the fonts in the
-   * application binary. But `expo-font` isn't supported on web, so we fall
-   * back to async loading here.
-   */
-  return [true, null]
-}

src/alf/util/useFonts.web.ts

@@ -1,21 +0,0 @@
-import React from 'react'
-
-export function useFonts() {
-  const [loaded, setLoaded] = React.useState(false)
-
-  React.useEffect(() => {
-    try {
-      document.fonts.ready
-        .then(() => {
-          setLoaded(true)
-        })
-        .catch(() => {
-          setLoaded(true)
-        })
-    } catch (e) {
-      setLoaded(true)
-    }
-  }, [setLoaded])
-
-  return [loaded, null]
-}

web/index.html

@@ -17,7 +17,106 @@
     <link rel="preconnect" href="https://bsky.social">
     <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">
+
     <style>
+      @font-face {
+        font-family: "Inter-Regular";
+        src: local("Inter-Regular"), url(/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf) format("font/otf");
+        font-weight: 400;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "Inter-Italic";
+        src: local("Inter-Italic"), url(/static/media/Inter-Italic.95778eb0c75dc956257e.otf) format("font/otf");
+        font-weight: 400;
+        font-style: italic;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "Inter-Medium";
+        src: local("Inter-Medium"), url(/static/media/Inter-Medium.296aa2d65964269836b3.otf) format("font/otf");
+        font-weight: 500;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "Inter-MediumItalic";
+        src: local("Inter-MediumItalic"), url(/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf) format("font/otf");
+        font-weight: 500;
+        font-style: italic;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "Inter-SemiBold";
+        src: local("Inter-SemiBold"), url(/static/media/Inter-SemiBold.2277990330981b8409bb.otf) format("font/otf");
+        font-weight: 600;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "Inter-SemiBoldItalic";
+        src: local("Inter-SemiBoldItalic"), url(/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf) format("font/otf");
+        font-weight: 600;
+        font-style: italic;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "Inter-Bold";
+        src: local("Inter-Bold"), url(/static/media/Inter-Bold.8d330503e1d034ad68de.otf) format("font/otf");
+        font-weight: 700;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "Inter-BoldItalic";
+        src: local("Inter-BoldItalic"), url(/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf) format("font/otf");
+        font-weight: 700;
+        font-style: italic;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "Inter-ExtraBold";
+        src: local("Inter-ExtraBold"), url(/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf) format("font/otf");
+        font-weight: 800;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "Inter-ExtraBoldItalic";
+        src: local("Inter-ExtraBoldItalic"), url(/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf) format("font/otf");
+        font-weight: 800;
+        font-style: italic;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "Inter-Black";
+        src: local("Inter-Black"), url(/static/media/Inter-Black.66e9a87f1c921e844ed4.otf) format("font/otf");
+        font-weight: 900;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "Inter-BlackItalic";
+        src: local("Inter-BlackItalic"), url(/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf) format("font/otf");
+        font-weight: 900;
+        font-style: italic;
+        font-display: swap;
+      }
+
       /**
        * Extend the react-native-web reset:
        * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
@@ -308,133 +407,6 @@
         margin-left: -6px;
       }
     </style>
-
-    <script>
-      try {
-        const InterRegular = new FontFace(
-          'Inter-Regular',
-          'url(/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf)',
-          {
-            style: 'normal',
-            weight: 400,
-          }
-        );
-        const InterItalic = new FontFace(
-          'Inter-Italic',
-          'url(/static/media/Inter-Italic.95778eb0c75dc956257e.otf)',
-          {
-            style: 'italic',
-            weight: 400,
-          }
-        );
-        const InterMedium = new FontFace(
-          'Inter-Medium',
-          'url(/static/media/Inter-Medium.296aa2d65964269836b3.otf)',
-          {
-            style: 'normal',
-            weight: 500,
-          }
-        );
-        const InterMediumItalic = new FontFace(
-          'Inter-MediumItalic',
-          'url(/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf)',
-          {
-            style: 'italic',
-            weight: 500,
-          }
-        );
-        const InterSemiBold = new FontFace(
-          'Inter-SemiBold',
-          'url(/static/media/Inter-SemiBold.2277990330981b8409bb.otf)',
-          {
-            style: 'normal',
-            weight: 600,
-          }
-        );
-        const InterSemiBoldItalic = new FontFace(
-          'Inter-SemiBoldItalic',
-          'url(/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf)',
-          {
-            style: 'italic',
-            weight: 600,
-          }
-        );
-        const InterBold = new FontFace(
-          'Inter-Bold',
-          'url(/static/media/Inter-Bold.8d330503e1d034ad68de.otf)',
-          {
-            style: 'normal',
-            weight: 700,
-          }
-        );
-        const InterBoldItalic = new FontFace(
-          'Inter-BoldItalic',
-          'url(/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf)',
-          {
-            style: 'italic',
-            weight: 700,
-          }
-        );
-        const InterExtraBold = new FontFace(
-          'Inter-ExtraBold',
-          'url(/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf)',
-          {
-            style: 'normal',
-            weight: 800,
-          }
-        );
-        const InterExtraBoldItalic = new FontFace(
-          'Inter-ExtraBoldItalic',
-          'url(/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf)',
-          {
-            style: 'italic',
-            weight: 800,
-          }
-        );
-        const InterBlack = new FontFace(
-          'Inter-Black',
-          'url(/static/media/Inter-Black.66e9a87f1c921e844ed4.otf)',
-          {
-            style: 'normal',
-            weight: 900,
-          }
-        );
-        const InterBlackItalic = new FontFace(
-          'Inter-BlackItalic',
-          'url(/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf)',
-          {
-            style: 'italic',
-            weight: 900,
-          }
-        );
-
-        document.fonts.add(InterRegular);
-        document.fonts.add(InterItalic);
-        document.fonts.add(InterMedium);
-        document.fonts.add(InterMediumItalic);
-        document.fonts.add(InterSemiBold);
-        document.fonts.add(InterSemiBoldItalic);
-        document.fonts.add(InterBold);
-        document.fonts.add(InterBoldItalic);
-        document.fonts.add(InterExtraBold);
-        document.fonts.add(InterExtraBoldItalic);
-        document.fonts.add(InterBlack);
-        document.fonts.add(InterBlackItalic);
-
-        InterRegular.load();
-        InterItalic.load();
-        InterMedium.load();
-        InterMediumItalic.load();
-        InterSemiBold.load();
-        InterSemiBoldItalic.load();
-        InterBold.load();
-        InterBoldItalic.load();
-        InterExtraBold.load();
-        InterExtraBoldItalic.load();
-        InterBlack.load();
-        InterBlackItalic.load();
-      } catch (e) {}
-    </script>
   </head>
 
   <body>