Add new fonts (#523)

This replaces the existing fonts with the new ones. "IBM Plex Mono" wasn't used at all anymore, so I just removed that.
MetaMask · Jan 27, 2025 · 920c8ad · 920c8ad
1 parent 8244108
commit 920c8ad
Show file tree

Hide file tree

Showing 15 changed files with 33 additions and 19 deletions.
diff --git a/src/assets/fonts/CentraNo1-Bold-Italic.woff2 b/src/assets/fonts/CentraNo1-Bold-Italic.woff2
diff --git a/src/assets/fonts/CentraNo1-Bold.woff2 b/src/assets/fonts/CentraNo1-Bold.woff2
diff --git a/src/assets/fonts/CentraNo1-Book-Italic.woff2 b/src/assets/fonts/CentraNo1-Book-Italic.woff2
diff --git a/src/assets/fonts/CentraNo1-Book.woff2 b/src/assets/fonts/CentraNo1-Book.woff2
diff --git a/src/assets/fonts/CentraNo1-Medium-Italic.woff2 b/src/assets/fonts/CentraNo1-Medium-Italic.woff2
diff --git a/src/assets/fonts/CentraNo1-Medium.woff2 b/src/assets/fonts/CentraNo1-Medium.woff2
diff --git a/src/assets/fonts/EuclidCircularB-Bold.woff2 b/src/assets/fonts/EuclidCircularB-Bold.woff2
diff --git a/src/assets/fonts/EuclidCircularB-Medium.woff2 b/src/assets/fonts/EuclidCircularB-Medium.woff2
diff --git a/src/assets/fonts/EuclidCircularB-Regular.woff2 b/src/assets/fonts/EuclidCircularB-Regular.woff2
diff --git a/src/assets/fonts/EuclidCircularB-Semibold.woff2 b/src/assets/fonts/EuclidCircularB-Semibold.woff2
diff --git a/src/assets/fonts/IBMPlexMono-Regular.woff2 b/src/assets/fonts/IBMPlexMono-Regular.woff2
diff --git a/src/assets/fonts/MM-Sans-Variable.woff2 b/src/assets/fonts/MM-Sans-Variable.woff2
diff --git a/src/assets/fonts/fonts.css b/src/assets/fonts/fonts.css
@@ -1,34 +1,47 @@
 @font-face {
-  font-family: 'Euclid Circular B';
+  font-family: 'MM Sans';
+  font-weight: 1 1000;
+  src: url('./MM-Sans-Variable.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Centra No1';
   font-style: normal;
   font-weight: 400;
-  src: url('./EuclidCircularB-Regular.woff2') format('woff2');
+  src: url('./CentraNo1-Book.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Centra No1';
+  font-style: italic;
+  font-weight: 400;
+  src: url('./CentraNo1-Book-Italic.woff2') format('woff2');
 }
 
 @font-face {
-  font-family: 'Euclid Circular B';
+  font-family: 'Centra No1';
   font-style: normal;
   font-weight: 500;
-  src: url('./EuclidCircularB-Medium.woff2') format('woff2');
+  src: url('./CentraNo1-Medium.woff2') format('woff2');
 }
 
 @font-face {
-  font-family: 'Euclid Circular B';
-  font-style: normal;
-  font-weight: 600;
-  src: url('./EuclidCircularB-Semibold.woff2') format('woff2');
+  font-family: 'Centra No1';
+  font-style: italic;
+  font-weight: 500;
+  src: url('./CentraNo1-Medium-Italic.woff2') format('woff2');
 }
 
 @font-face {
-  font-family: 'Euclid Circular B';
+  font-family: 'Centra No1';
   font-style: normal;
   font-weight: 700;
-  src: url('./EuclidCircularB-Bold.woff2') format('woff2');
+  src: url('./CentraNo1-Bold.woff2') format('woff2');
 }
 
 @font-face {
-  font-family: 'IBM Plex Mono';
-  font-style: normal;
-  font-weight: 400;
-  src: url('./IBMPlexMono-Regular.woff2') format('woff2');
+  font-family: 'Centra No1';
+  font-style: italic;
+  font-weight: 700;
+  src: url('./CentraNo1-Bold-Italic.woff2') format('woff2');
 }
diff --git a/src/theme/fonts.ts b/src/theme/fonts.ts
@@ -1,7 +1,8 @@
-export const DEFAULT_FONT = `"Euclid Circular B", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
+export const DEFAULT_FONT =
+  '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
 
 export const fonts: Record<string, string> = {
-  heading: DEFAULT_FONT,
-  body: DEFAULT_FONT,
+  heading: `"MM Sans", ${DEFAULT_FONT}`,
+  body: `"Centra No1", ${DEFAULT_FONT}`,
   code: `SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace`,
 };
diff --git a/src/theme/index.test.ts b/src/theme/index.test.ts
@@ -327,9 +327,9 @@ describe('theme', () => {
           "useSystemColorMode": true,
         },
         "fonts": Object {
-          "body": "\\"Euclid Circular B\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\"",
+          "body": "\\"Centra No1\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\"",
           "code": "SFMono-Regular, Consolas, \\"Liberation Mono\\", Menlo, Courier, monospace",
-          "heading": "\\"Euclid Circular B\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\"",
+          "heading": "\\"MM Sans\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\"",
         },
         "semanticTokens": Object {
           "borders": Object {