Download each web font once on a first visit

.storybook/main.ts

@@ -7,7 +7,7 @@ import rsbuildFinal from './rsbuild.config.ts';
 const main: StorybookConfig = {
     stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
     addons: ['@storybook/addon-a11y', '@storybook/addon-docs'],
-    staticDirs: ['./public', {from: '../assets/css', to: 'css'}, {from: '../assets/fonts/web', to: 'fonts'}],
+    staticDirs: ['./public', {from: '../assets/css', to: 'css'}, {from: '../assets/fonts/web', to: 'fonts/web'}],
     core: {},
 
     managerHead: (head) => `

assets/README.md

@@ -77,7 +77,7 @@ To add or remove a font used in the web app:
           font-family: <new_font_family>;
           font-weight: 500;
           font-style: normal;
-          src: url('/fonts/<font-family-file>.woff2') format('woff2');
+          src: url('../fonts/web/<font-family-file>.woff2') format('woff2');
       }
       /* Add the other variants too. */
       ```

assets/css/fonts.css

@@ -2,80 +2,80 @@
     font-family: Expensify Neue;
     font-weight: 400;
     font-style: normal;
-    src: url('/fonts/ExpensifyNeue-Regular.woff2') format('woff2');
+    src: url('../fonts/web/ExpensifyNeue-Regular.woff2') format('woff2');
 }
 
 @font-face {
     font-family: Expensify Neue;
     font-weight: 700;
     font-style: normal;
-    src: url('/fonts/ExpensifyNeue-Bold.woff2') format('woff2');
+    src: url('../fonts/web/ExpensifyNeue-Bold.woff2') format('woff2');
 }
 
 @font-face {
     font-family: Expensify Neue;
     font-weight: 400;
     font-style: italic;
-    src: url('/fonts/ExpensifyNeue-Italic.woff2') format('woff2');
+    src: url('../fonts/web/ExpensifyNeue-Italic.woff2') format('woff2');
 }
 
 @font-face {
     font-family: Expensify Neue;
     font-weight: 700;
     font-style: italic;
-    src: url('/fonts/ExpensifyNeue-BoldItalic.woff2') format('woff2');
+    src: url('../fonts/web/ExpensifyNeue-BoldItalic.woff2') format('woff2');
 }
 
 @font-face {
     font-family: Expensify Mono;
     font-weight: 400;
     font-style: normal;
-    src: url('/fonts/ExpensifyMono-Regular.woff2') format('woff2');
+    src: url('../fonts/web/ExpensifyMono-Regular.woff2') format('woff2');
 }
 
 @font-face {
     font-family: Expensify Mono;
     font-weight: 700;
     font-style: normal;
-    src: url('/fonts/ExpensifyMono-Bold.woff2') format('woff2');
+    src: url('../fonts/web/ExpensifyMono-Bold.woff2') format('woff2');
 }
 
 @font-face {
     font-family: Expensify Mono;
     font-weight: 400;
     font-style: italic;
-    src: url('/fonts/ExpensifyMono-Italic.woff2') format('woff2');
+    src: url('../fonts/web/ExpensifyMono-Italic.woff2') format('woff2');
 }
 
 @font-face {
     font-family: Expensify Mono;
     font-weight: 700;
     font-style: italic;
-    src: url('/fonts/ExpensifyMono-BoldItalic.woff2') format('woff2');
+    src: url('../fonts/web/ExpensifyMono-BoldItalic.woff2') format('woff2');
 }
 
 @font-face {
     font-family: Expensify New Kansas;
     font-weight: 500;
     font-style: normal;
-    src: url('/fonts/ExpensifyNewKansas-Medium.woff2') format('woff2');
+    src: url('../fonts/web/ExpensifyNewKansas-Medium.woff2') format('woff2');
 }
 
 @font-face {
     font-family: Expensify New Kansas;
     font-weight: 500;
     font-style: italic;
-    src: url('/fonts/ExpensifyNewKansas-MediumItalic.woff2') format('woff2');
+    src: url('../fonts/web/ExpensifyNewKansas-MediumItalic.woff2') format('woff2');
 }
 
 @font-face {
     font-family: Windows Segoe UI Emoji;
-    src: url('/fonts/seguiemj.woff2') format('woff2');
+    src: url('../fonts/web/seguiemj.woff2') format('woff2');
 }
 
 @font-face {
     font-family: Custom Emoji Font;
-    src: url('/fonts/CustomEmojiWebFont.ttf') format('truetype');
+    src: url('../fonts/web/CustomEmojiWebFont.ttf') format('truetype');
 }
 
 * {

config/rsbuild/rsbuild.common.ts

@@ -369,7 +369,9 @@ const getCommonConfiguration = async ({file = '.env', platform = 'web', isDevSer
                 // which can only classify frames when it did.
                 __SENTRY_APPLICATION_KEY_STAMPED__: !!sentryWebpackPlugin,
             },
-            entry: {main: './index.js'},
+            // fonts.css is bundled rather than copied as a static file, so its font paths resolve to the same
+            // content-hashed font files the charts import, and the browser downloads each font only once.
+            entry: {main: ['./assets/css/fonts.css', './index.js']},
         },
         output: {
             target: 'web',
@@ -410,8 +412,7 @@ const getCommonConfiguration = async ({file = '.env', platform = 'web', isDevSer
                 {from: 'web/robots.txt'},
                 {from: 'assets/images/expensify-app-icon.svg'},
                 {from: 'web/manifest.json'},
-                {from: 'assets/css', to: 'css'},
-                {from: 'assets/fonts/web', to: 'fonts'},
+                {from: 'assets/css/pdf.css', to: 'css/pdf.css'},
                 {from: 'assets/sounds', to: 'sounds'},
                 {from: 'assets/pdfs', to: 'pdfs'},
                 {from: 'node_modules/react-pdf/dist/Page/AnnotationLayer.css', to: 'css/AnnotationLayer.css'},

web/index.html

@@ -13,21 +13,6 @@
     <meta property="og:title" content="New Expensify">
     <meta property="og:description" content="Corporate cards, reimbursements, receipt scanning, invoicing, and bill pay.">
     <meta property="og:image" content="https://new.expensify.com/og-preview-image.png">
-    <style>
-        @font-face {
-            font-family: Expensify Neue;
-            font-weight: 400;
-            font-style: normal;
-            src: url('/fonts/ExpensifyNeue-Regular.woff2') format('woff2');
-        }
-        @font-face {
-            font-family: Expensify Neue;
-            font-weight: 700;
-            font-style: normal;
-            src: url('/fonts/ExpensifyNeue-Bold.woff2') format('woff2');
-        }
-    </style>
-    <link rel="stylesheet" type="text/css" href="/css/fonts.css" />
     <link rel="stylesheet" type="text/css" href="/css/pdf.css" />
     <!-- Do not index the staging site -->
     <% if (isStaging) { %>