Use FiraSans (#10)

kitsteam · Sep 11, 2024 · 70a1528 · 70a1528
1 parent 0fc8ed3
commit 70a1528
Show file tree

Hide file tree

Showing 18 changed files with 42 additions and 96 deletions.
diff --git a/excalidraw-app/share/ShareDialog.scss b/excalidraw-app/share/ShareDialog.scss
@@ -81,7 +81,7 @@
       border: none;
       border-radius: 0.6875rem;
 
-      font-family: "Assistant";
+      font-family: "FiraSans";
       font-style: normal;
       font-weight: 600;
       font-size: 0.75rem;
@@ -100,7 +100,7 @@
     }
 
     &__picker {
-      font-family: "Assistant";
+      font-family: "FiraSans";
 
       &__illustration {
         display: flex;

diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
@@ -1384,7 +1384,7 @@ class App extends React.Component<AppProps, AppState> {
               padding: `${FRAME_NAME_EDIT_PADDING}px`,
               borderRadius: 4,
               boxShadow: "inset 0 0 0 1px var(--color-primary)",
-              fontFamily: "Assistant",
+              fontFamily: "FiraSans",
               fontSize: "14px",
               transform: `translate(-${FRAME_NAME_EDIT_PADDING}px, ${FRAME_NAME_EDIT_PADDING}px)`,
               color: "var(--color-gray-80)",

diff --git a/packages/excalidraw/components/ImageExportDialog.scss b/packages/excalidraw/components/ImageExportDialog.scss
@@ -15,7 +15,7 @@
     user-select: none;
 
     & h3 {
-      font-family: "Assistant";
+      font-family: "FiraSans";
       font-style: normal;
       font-weight: 700;
       font-size: 1.313rem;
@@ -135,7 +135,7 @@
           flex-direction: row;
           align-items: center;
 
-          font-family: "Assistant";
+          font-family: "FiraSans";
           font-weight: 600;
           font-size: 1rem;
           line-height: 150%;

diff --git a/packages/excalidraw/components/OverwriteConfirm/OverwriteConfirm.scss b/packages/excalidraw/components/OverwriteConfirm/OverwriteConfirm.scss
@@ -38,7 +38,7 @@
       background: var(--color-danger-background);
       border-radius: 0.5rem;
 
-      font-family: "Assistant";
+      font-family: "FiraSans";
       font-style: normal;
       font-weight: 400;
       font-size: 1rem;

diff --git a/packages/excalidraw/components/RadioGroup.scss b/packages/excalidraw/components/RadioGroup.scss
@@ -39,7 +39,7 @@
 
       border-radius: 8px;
 
-      font-family: "Assistant";
+      font-family: "FiraSans";
       font-style: normal;
       font-weight: 600;
       font-size: 0.75rem;

diff --git a/packages/excalidraw/components/ShareableLinkDialog.scss b/packages/excalidraw/components/ShareableLinkDialog.scss
@@ -13,7 +13,7 @@
     }
 
     h3 {
-      font-family: "Assistant";
+      font-family: "FiraSans";
       font-weight: 700;
       font-size: 1.313rem;
       line-height: 130%;
@@ -26,6 +26,7 @@
         from {
           opacity: 0;
         }
+
         to {
           opacity: 1;
         }
@@ -46,7 +47,7 @@
       border: none;
       border-radius: 0.6875rem;
 
-      font-family: "Assistant";
+      font-family: "FiraSans";
       font-style: normal;
       font-weight: 600;
       font-size: 0.75rem;

diff --git a/packages/excalidraw/components/TextField.scss b/packages/excalidraw/components/TextField.scss
@@ -19,7 +19,7 @@
     }
 
     &__label {
-      font-family: "Assistant";
+      font-family: "FiraSans";
       font-style: normal;
       font-weight: 600;
       font-size: 0.875rem;
@@ -69,7 +69,7 @@
 
         color: var(--ExcTextField--color);
 
-        font-family: "Assistant";
+        font-family: "FiraSans";
         font-style: normal;
         font-weight: 400;
         font-size: 1rem;

diff --git a/packages/excalidraw/components/Tooltip.scss b/packages/excalidraw/components/Tooltip.scss
@@ -2,7 +2,7 @@
 
 // container in body where the actual tooltip is appended to
 .excalidraw-tooltip {
-  --ui-font: Assistant, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI,
+  --ui-font: FiraSans, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI,
     Roboto, Helvetica, Arial, sans-serif;
   font-family: var(--ui-font);
   position: fixed;

diff --git a/packages/excalidraw/css/styles.scss b/packages/excalidraw/css/styles.scss
@@ -29,7 +29,7 @@ body.excalidraw-cursor-resize * {
 }
 
 .excalidraw {
-  --ui-font: Assistant, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI,
+  --ui-font: FiraSans, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI,
     Roboto, Helvetica, Arial, sans-serif;
   font-family: var(--ui-font);
 
@@ -793,6 +793,6 @@ body.excalidraw-cursor-resize * {
     color: #fff;
     font-weight: 700;
     letter-spacing: 0.6px;
-    font-family: "Assistant";
+    font-family: "FiraSans";
   }
 }
diff --git a/packages/excalidraw/fonts/assets/Assistant-Bold.woff2 b/packages/excalidraw/fonts/assets/Assistant-Bold.woff2
diff --git a/packages/excalidraw/fonts/assets/Assistant-Medium.woff2 b/packages/excalidraw/fonts/assets/Assistant-Medium.woff2
diff --git a/packages/excalidraw/fonts/assets/Assistant-Regular.woff2 b/packages/excalidraw/fonts/assets/Assistant-Regular.woff2
diff --git a/packages/excalidraw/fonts/assets/FiraSans-Bold.otf b/packages/excalidraw/fonts/assets/FiraSans-Bold.otf
diff --git a/packages/excalidraw/fonts/assets/FiraSans-Light.otf b/packages/excalidraw/fonts/assets/FiraSans-Light.otf
diff --git a/packages/excalidraw/fonts/assets/FiraSans-Regular.otf b/packages/excalidraw/fonts/assets/FiraSans-Regular.otf
diff --git a/packages/excalidraw/fonts/assets/fonts.css b/packages/excalidraw/fonts/assets/fonts.css
@@ -3,33 +3,18 @@
 /* WARN: The following content is replaced during excalidraw-app build  */
 
 @font-face {
-  font-family: "Assistant";
-  src: url(./Assistant-Regular.woff2) format("woff2");
-  font-weight: 400;
-  style: normal;
-  display: swap;
+  font-family: "FiraSans";
+  src: url("FiraSans-Regular.otf") format("opentype");
 }
 
 @font-face {
-  font-family: "Assistant";
-  src: url(./Assistant-Medium.woff2) format("woff2");
-  font-weight: 500;
-  style: normal;
-  display: swap;
+  font-family: "FiraSans";
+  font-weight: light;
+  src: url("FiraSans-Light.otf") format("opentype");
 }
 
 @font-face {
-  font-family: "Assistant";
-  src: url(./Assistant-SemiBold.woff2) format("woff2");
-  font-weight: 600;
-  style: normal;
-  display: swap;
-}
-
-@font-face {
-  font-family: "Assistant";
-  src: url(./Assistant-Bold.woff2) format("woff2");
-  font-weight: 700;
-  style: normal;
-  display: swap;
+  font-family: "FiraSans";
+  font-weight: bold;
+  src: url("FiraSans-Bold.otf") format("opentype");
 }
diff --git a/public/fonts.css b/public/fonts.css
@@ -12,31 +12,6 @@
   font-display: swap;
 }
 
-@font-face {
-  font-family: "Assistant";
-  src: url("Assistant-Regular.woff2");
-  font-display: swap;
-  font-weight: 400;
-}
-@font-face {
-  font-family: "Assistant";
-  src: url("Assistant-Medium.woff2");
-  font-display: swap;
-  font-weight: 500;
-}
-@font-face {
-  font-family: "Assistant";
-  src: url("Assistant-SemiBold.woff2");
-  font-display: swap;
-  font-weight: 600;
-}
-@font-face {
-  font-family: "Assistant";
-  src: url("Assistant-Bold.woff2");
-  font-display: swap;
-  font-weight: 700;
-}
-
 @font-face {
   font-family: "FiraSans";
   src: url("FiraSans-Regular.otf") format("opentype");

diff --git a/scripts/woff2/woff2-vite-plugins.js b/scripts/woff2/woff2-vite-plugins.js
@@ -49,37 +49,22 @@ module.exports.woff2BrowserPlugin = () => {
       if (!isDev && id.endsWith("/excalidraw/fonts/assets/fonts.css")) {
         return `/* WARN: The following content is generated during excalidraw-app build */
 
-      @font-face {
-        font-family: "Assistant";
-        src: url(./Assistant-Regular-DVxZuzxb.woff2) format("woff2");
-        font-weight: 400;
-        style: normal;
-        display: swap;
-      }
-
-      @font-face {
-        font-family: "Assistant";
-        src: url(./Assistant-Medium-DrcxCXg3.woff2) format("woff2");
-        font-weight: 500;
-        style: normal;
-        display: swap;
-      }
-
-      @font-face {
-        font-family: "Assistant";
-        src: url(./Assistant-SemiBold-SCI4bEL9.woff2) format("woff2");
-        font-weight: 600;
-        style: normal;
-        display: swap;
-      }
-
-      @font-face {
-        font-family: "Assistant";
-        src: url(./Assistant-Bold-gm-uSS1B.woff2) format("woff2");
-        font-weight: 700;
-        style: normal;
-        display: swap;
-      }`;
+        @font-face {
+          font-family: "FiraSans";
+          src: url("FiraSans-Regular.otf") format("opentype");
+        }
+        
+        @font-face {
+          font-family: "FiraSans";
+          font-weight: light;
+          src: url("FiraSans-Light.otf") format("opentype");
+        }
+        
+        @font-face {
+          font-family: "FiraSans";
+          font-weight: bold;
+          src: url("FiraSans-Bold.otf") format("opentype");
+        }`;
       }
 
       // using EXCALIDRAW_ASSET_PATH as a SSOT
@@ -96,21 +81,21 @@ module.exports.woff2BrowserPlugin = () => {
       <!-- Preload all default fonts and Virgil for backwards compatibility to avoid swap on init -->
       <link
         rel="preload"
-        href="./Excalifont-Regular-C9eKQy_N.woff2"
+        href="Excalifont-Regular-C9eKQy_N.woff2"
         as="font"
         type="font/woff2"
         crossorigin="anonymous"
       />
       <link
         rel="preload"
-        href="./Virgil-Regular-hO16qHwV.woff2"
+        href="Virgil-Regular-hO16qHwV.woff2"
         as="font"
         type="font/woff2"
         crossorigin="anonymous"
       />
       <link
         rel="preload"
-        href="./ComicShanns-Regular-D0c8wzsC.woff2"
+        href="ComicShanns-Regular-D0c8wzsC.woff2"
         as="font"
         type="font/woff2"
         crossorigin="anonymous"