Add New Fonts

.storybook/theme.js

@@ -9,7 +9,7 @@ export default create({
     brandImage: 'logomark.svg',
     colorPrimary: colors.dark,
     colorSecondary: colors.orange,
-    fontBase: 'GTAmericaExp-Regular',
+    fontBase: 'ExpensifyNeue-Regular',
     fontCode: 'monospace',
     textInverseColor: colors.black,
 });

assets/css/fonts.css

@@ -1,92 +1,43 @@
 @font-face {
-    font-family: GTAmericaExp-Regular;
-    font-weight: 100;
-    font-style: normal;
-    src: url("https://www.expensify.com/font/GT-America-Standard-Light.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Light.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Light.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: GTAmericaExp-Regular;
-    font-weight: 200;
-    font-style: normal;
-    src: url("https://www.expensify.com/font/GT-America-Standard-Thin.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Thin.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Thin.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: GTAmericaExp-Regular;
+    font-family: ExpensifyNeue-Regular;
     font-weight: 400;
     font-style: normal;
-    src: url("https://www.expensify.com/font/GT-America-Standard-Regular.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Regular.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Regular.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: GTAmericaExp-Regular;
-    font-weight: 500;
-    font-style: normal;
-    src: url("https://www.expensify.com/font/GT-America-Standard-Medium.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Medium.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Medium.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: GTAmericaExp-Regular;
-    font-weight: 600;
-    font-style: normal;
-    src: url("https://www.expensify.com/font/GT-America-Standard-Medium.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Medium.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Medium.woff2") format("woff2");
+    src: url('/fonts/ExpensifyNeue-Regular.woff2') format('woff2'), url('/fonts/ExpensifyNeue-Regular.woff') format('woff');
 }
 
 @font-face {
-    font-family: GTAmericaExp-Regular;
+    font-family: ExpensifyNeue-Bold;
     font-weight: 700;
     font-style: normal;
-    src: url("https://www.expensify.com/font/GT-America-Standard-Bold.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Bold.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Bold.woff2") format("woff2");
+    src: url('/fonts/ExpensifyNeue-Bold.woff2') format('woff2'), url('/fonts/ExpensifyNeue-Bold.woff') format('woff');
 }
 
 @font-face {
-    font-family: GTAmericaExp-RgIt;
+    font-family: ExpensifyNeue-Italic;
     font-weight: 400;
-    font-style: italic;
-    src: url("https://www.expensify.com/font/GT-America-Standard-Regular-Italic.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Regular-Italic.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Regular-Italic.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: GTAmericaExp-MdIt;
-    font-weight: 500;
-    font-style: italic;
-    src: url("https://www.expensify.com/font/GT-America-Standard-Medium-Italic.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Medium-Italic.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Medium-Italic.woff2") format("woff2");
+    font-style: normal;
+    src: url('/fonts/ExpensifyNeue-Italic.woff2') format('woff2'), url('/fonts/ExpensifyNeue-Italic.woff') format('woff');
 }
 
 @font-face {
-    font-family: GTAmericaExp-BdIt;
+    font-family: ExpensifyNeue-BoldItalic;
     font-weight: 700;
-    font-style: italic;
-    src: url("https://www.expensify.com/font/GT-America-Standard-Bold-Italic.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Bold-Italic.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Bold-Italic.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: GTAmericaExpMono-Rg;
-    font-weight: 400;
     font-style: normal;
-    src: url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular.eot') format('embedded-opentype'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular.woff') format('woff'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular.woff2') format('woff2');
+    src: url('/fonts/ExpensifyNeue-BoldItalic.woff2') format('woff2'), url('/fonts/ExpensifyNeue-BoldItalic.woff') format('woff');
 }
 
 @font-face {
-    font-family: GTAmericaExpMono-RgIt;
+    font-family: ExpensifyMono-Regular;
     font-weight: 400;
-    font-style: italic;
-    src: url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular-Italic.eot') format('embedded-opentype'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular-Italic.woff') format('woff'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular-Italic.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: GTAmericaExpMono-Bd;
-    font-weight: 700;
     font-style: normal;
-    src: url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold.eot') format('embedded-opentype'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold.woff') format('woff'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold.woff2') format('woff2');
+    src: url('/fonts/ExpensifyMono-Regular.woff2') format('woff2'), url('/fonts/ExpensifyMono-Regular.woff') format('woff');
 }
 
 @font-face {
-    font-family: GTAmericaExpMono-BdIt;
+    font-family: ExpensifyMono-Bold;
     font-weight: 700;
-    font-style: italic;
-    src: url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold-Italic.eot') format('embedded-opentype'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold-Italic.woff') format('woff'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold-Italic.woff2') format('woff2');
+    font-style: normal;
+    src: url('/fonts/ExpensifyMono-Bold.woff2') format('woff2'),  url('/fonts/ExpensifyMono-Bold.woff') format('woff');
 }
 
 * {

config/webpack/webpack.common.js

@@ -90,6 +90,7 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
                 {from: 'web/favicon-unread.png'},
                 {from: 'web/og-preview-image.png'},
                 {from: 'assets/css', to: 'css'},
+                {from: 'assets/fonts', to: 'fonts'},
                 {from: 'node_modules/react-pdf/dist/esm/Page/AnnotationLayer.css', to: 'css/AnnotationLayer.css'},
                 {from: 'assets/images/shadow.png', to: 'images/shadow.png'},
                 {from: '.well-known/apple-app-site-association', to: '.well-known/apple-app-site-association', toType: 'file'},
@@ -187,6 +188,10 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
                 test: /\.css$/i,
                 use: ['style-loader', 'css-loader'],
             },
+            {
+                test: /\.(woff|woff2)$/i,
+                type: 'asset',
+            },
             {
                 resourceQuery: /raw/,
                 type: 'asset/source',