perf(content,settings): Remove custom fonts

Because:
* Custom fonts have performance implications, there's a 403 error in content-server regarding fonts, and most importantly these custom fonts have been deprecated in Firefox which we're looking to align our design system to

This commit:
* Removes the custom fonts from content-server and settings
* Updates Storybook accordingly
* Tweaks a couple of third party auth styles

closes FXA-9058

packages/fxa-content-server/app/styles/tailwind.css

@@ -7,7 +7,6 @@
 @import 'tailwindcss/utilities';
 
 @import 'fxa-react/styles/index';
-@import './tailwind/fonts';
 
 /* REACT NOTE: when we refactor to React it's going to be nicer to create reusable
  * components and ditch some of these custom component classes. */

packages/fxa-content-server/app/styles/tailwind/fonts/index.css

@@ -1,37 +0,0 @@
-/* font path is relative to the tailwind.out file */
-/* REACT NOTE: this file can likely be shared in `fxa-react` */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('tailwind/fonts/Inter-Regular.woff2?v=3.13') format('woff2'),
-    url('tailwind/fonts/Inter-Regular.woff?v=3.13') format('woff');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('tailwind/fonts/Inter-Bold.woff2?v=3.13') format('woff2'),
-    url('tailwind/fonts/Inter-Bold.woff?v=3.13') format('woff');
-}
-
-@font-face {
-  font-family: 'Metropolis';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('tailwind/fonts/Metropolis-Regular.woff2?v=10.0.0') format('woff2'),
-    url('tailwind/fonts/Metropolis-Regular.woff?v=10.0.0') format('woff');
-}
-
-@font-face {
-  font-family: 'Metropolis';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('tailwind/fonts/Metropolis-Bold.woff2?v=10.0.0') format('woff2'),
-    url('tailwind/fonts/Metropolis-Bold.woff?v=10.0.0') format('woff');
-}

packages/fxa-react/configs/tailwind.js

@@ -115,7 +115,6 @@ module.exports = {
     },
     fontFamily: {
       body: [
-        'Inter',
         'system-ui',
         '-apple-system',
         'BlinkMacSystemFont',
@@ -130,7 +129,6 @@ module.exports = {
         'sans-serif',
       ],
       header: [
-        'Metropolis',
         'system-ui',
         '-apple-system',
         'BlinkMacSystemFont',

packages/fxa-settings/.storybook/design-guide/pages/Typography.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import Page from '../Page';
 import Copiable from '../Copiable';
+import LinkExternal from 'fxa-react/components/LinkExternal';
 
 /**
  * Note: we have a handful of concatenated classes here, which PurgeCSS will not observe
@@ -95,9 +96,30 @@ export const Typography = ({ config }) => {
 
   return (
     <Page title="Typography">
+      <p className="my-2 max-w-4xl">
+        When we redesigned Settings in 2019, we used <b>Metropolis</b> as our
+        header font and <b>Inter</b> as our body font. These were removed in
+        early 2024 since they are deprecated, see{' '}
+        <LinkExternal
+          href="https://mozilla-hub.atlassian.net/browse/FXA-9058"
+          className="underline link-blue"
+        >
+          FXA-9058
+        </LinkExternal>{' '}
+        for more details. We are currently using <b>system fonts</b> for header
+        and body copy, see{' '}
+        <LinkExternal
+          href="https://github.com/mozilla/fxa/blob/main/packages/fxa-react/configs/tailwind.js"
+          className="underline link-blue"
+        >
+          the Tailwind config file
+        </LinkExternal>{' '}
+        "fontFamily" section to see fallbacks.
+      </p>
       <p className="mt-2 mb-8 max-w-4xl">
-        Because we use custom font-faces, we keep the number of font-weights low
-        as they would need to pull in additional custom fonts.
+        If we introduce custom font-faces in the future, we should keep the
+        number of font-weights low as they otherwise would need to pull in
+        additional custom fonts.
       </p>
       <div>
         {Object.keys(twFontFamilies).map((fontFamilyShortName) => (

packages/fxa-settings/.storybook/manager-head.html

@@ -1,2 +1 @@
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
 <link rel="shortcut icon" href="./favicon.ico" />

packages/fxa-settings/.storybook/preview.js

@@ -3,7 +3,6 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import '../src/styles/tailwind.out.css';
-import '../src/styles/fonts';
 import './design-guide/design-guide.css';
 import { initializeRTL } from 'storybook-addon-rtl';
 

packages/fxa-settings/src/components/ThirdPartyAuth/index.tsx

@@ -37,7 +37,9 @@ const ThirdPartyAuth = ({
             <div className="text-sm flex items-center justify-center my-6">
               <div className="flex-1 h-px bg-grey-300 divide-x"></div>
               <FtlMsg id="third-party-auth-options-or">
-                <div className="mx-4 text-base text-grey-300">or</div>
+                <div className="mx-4 text-base text-grey-300 font-extralight">
+                  or
+                </div>
               </FtlMsg>
               <div className="flex-1 h-px bg-grey-300 divide-x"></div>
             </div>
@@ -154,7 +156,7 @@ const ThirdPartySignInForm = ({
 
       <button
         type="submit"
-        className="w-full mt-2 justify-center text-black bg-transparent border-grey-300 border hover:border-black font-medium rounded-lg text-md text-center inline-flex items-center"
+        className="w-full mt-2 justify-center text-black bg-transparent border-grey-300 border hover:border-black rounded-lg text-md text-center inline-flex items-center"
         onClick={onClick}
       >
         {buttonText}

packages/fxa-settings/src/styles/fonts.css

@@ -1,35 +0,0 @@
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('fonts/Inter-Regular.woff2?v=3.13') format('woff2'),
-    url('fonts/Inter-Regular.woff?v=3.13') format('woff');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('fonts/Inter-Bold.woff2?v=3.13') format('woff2'),
-    url('fonts/Inter-Bold.woff?v=3.13') format('woff');
-}
-
-@font-face {
-  font-family: 'Metropolis';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('fonts/Metropolis-Regular.woff2?v=10.0.0') format('woff2'),
-    url('fonts/Metropolis-Regular.woff?v=10.0.0') format('woff');
-}
-
-@font-face {
-  font-family: 'Metropolis';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('fonts/Metropolis-Bold.woff2?v=10.0.0') format('woff2'),
-    url('fonts/Metropolis-Bold.woff?v=10.0.0') format('woff');
-}

packages/fxa-settings/src/styles/tailwind.css

@@ -8,7 +8,6 @@
 @import 'tailwindcss/variants';
 
 @import 'fxa-react/styles/index';
-@import './fonts';
 @import './unit-row';
 @import './drop-down-menu';
 @import './slider';