diff --git a/.storybook/main.ts b/.storybook/main.ts index c965f8404e3c..d9bb2f932d2f 100644 --- a/.storybook/main.ts +++ b/.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) => ` diff --git a/assets/README.md b/assets/README.md index aae609f15a10..d6dd8e078642 100644 --- a/assets/README.md +++ b/assets/README.md @@ -77,7 +77,7 @@ To add or remove a font used in the web app: font-family: ; font-weight: 500; font-style: normal; - src: url('/fonts/.woff2') format('woff2'); + src: url('../fonts/web/.woff2') format('woff2'); } /* Add the other variants too. */ ``` diff --git a/assets/css/fonts.css b/assets/css/fonts.css index 14f1ad684ce2..c19465267b2b 100644 --- a/assets/css/fonts.css +++ b/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'); } * { diff --git a/config/rsbuild/rsbuild.common.ts b/config/rsbuild/rsbuild.common.ts index caf4082088e8..c8a3c35947f9 100644 --- a/config/rsbuild/rsbuild.common.ts +++ b/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'}, diff --git a/web/index.html b/web/index.html index da7a135748b5..4c0e4a7f4eaf 100644 --- a/web/index.html +++ b/web/index.html @@ -13,21 +13,6 @@ - - <% if (isStaging) { %>