refact(fonts): preload main fonts, reduce MPLUS2 font size

Axobot-org · Jan 4, 2025 · 2290992 · 2290992
1 parent 44b0c38
commit 2290992
Show file tree

Hide file tree

Showing 11 changed files with 15 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -20,6 +20,8 @@
   <meta name="msapplication-TileColor" content="#da532c">
 
   <link rel="dns-prefetch" href="https://cdn.discordapp.com" />
+  <link rel="preload" href="/assets/fonts/MPLUS2-VariableFont-latin.woff" as="font" type="font/woff" crossorigin>
+  <link rel="preload" href="/assets/fonts/Poppins-Regular.ttf" as="font" type="font/ttf" crossorigin>
   <link rel="preconnect" href="https://zrunner.me" crossorigin />
   <link rel="preconnect" href=%VITE_API_URL% />
   <link rel="manifest" href="/manifest.json" />

diff --git a/public/assets/fonts/MPLUS2-VariableFont-extended.woff b/public/assets/fonts/MPLUS2-VariableFont-extended.woff
diff --git a/public/assets/fonts/MPLUS2-VariableFont-latin.woff b/public/assets/fonts/MPLUS2-VariableFont-latin.woff
diff --git a/src/styles/fonts/Poppins-Bold.ttf → public/assets/fonts/Poppins-Bold.ttf b/src/styles/fonts/Poppins-Bold.ttf → public/assets/fonts/Poppins-Bold.ttf
diff --git a/src/styles/fonts/Poppins-BoldItalic.ttf → public/assets/fonts/Poppins-BoldItalic.ttf b/src/styles/fonts/Poppins-BoldItalic.ttf → public/assets/fonts/Poppins-BoldItalic.ttf
diff --git a/src/styles/fonts/Poppins-Italic.ttf → public/assets/fonts/Poppins-Italic.ttf b/src/styles/fonts/Poppins-Italic.ttf → public/assets/fonts/Poppins-Italic.ttf
diff --git a/src/styles/fonts/Poppins-Regular.ttf → public/assets/fonts/Poppins-Regular.ttf b/src/styles/fonts/Poppins-Regular.ttf → public/assets/fonts/Poppins-Regular.ttf
diff --git a/src/styles/fonts/Poppins-Thin.ttf → public/assets/fonts/Poppins-Thin.ttf b/src/styles/fonts/Poppins-Thin.ttf → public/assets/fonts/Poppins-Thin.ttf
diff --git a/src/styles/fonts/Poppins-ThinItalic.ttf → public/assets/fonts/Poppins-ThinItalic.ttf b/src/styles/fonts/Poppins-ThinItalic.ttf → public/assets/fonts/Poppins-ThinItalic.ttf
diff --git a/src/styles/fonts/MPLUS2-VariableFont_wght.ttf b/src/styles/fonts/MPLUS2-VariableFont_wght.ttf
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
@@ -1,13 +1,6 @@
 import { createTheme, LinkProps } from "@mui/material";
 import { TypographyOptions } from "@mui/material/styles/createTypography";
 
-import MPlus2 from "./fonts/MPLUS2-VariableFont_wght.ttf";
-import PoppinsBold from "./fonts/Poppins-Bold.ttf";
-import PoppinsBoldItalic from "./fonts/Poppins-BoldItalic.ttf";
-import PoppinsRegularItalic from "./fonts/Poppins-Italic.ttf";
-import PoppinsRegular from "./fonts/Poppins-Regular.ttf";
-import PoppinsThin from "./fonts/Poppins-Thin.ttf";
-import PoppinsThinItalic from "./fonts/Poppins-ThinItalic.ttf";
 import LinkBehavior from "./LinkBehavior";
 
 declare module "@mui/material/styles" {
@@ -51,46 +44,51 @@ export const AxoTheme = createTheme({
       styleOverrides: `
         @font-face {
           font-family: 'M PLUS 2';
-          src: local('M PLUS 2'), url(${MPlus2}) format('truetype');
+          src: local('M PLUS 2'), url(/assets/fonts/MPLUS2-VariableFont-latin.woff) format('woff');
+          font-display: swap;
+        }
+        @font-face {
+          font-family: 'M PLUS 2 ext';
+          src: local('M PLUS 2'), url(/assets/fonts/MPLUS2-VariableFont-extended.woff) format('woff');
           font-display: swap;
         }
         @font-face {
           font-family: 'Poppins';
           font-weight: 500;
-          src: local('Poppins'), local('Poppins-bold'), url(${PoppinsBold}) format('truetype');
+          src: local('Poppins'), local('Poppins-bold'), url(/assets/fonts/Poppins-Bold.ttf) format('truetype');
           font-display: swap;
         }
         @font-face {
           font-family: 'Poppins';
           font-weight: 500;
           font-style: italic;
-          src: local('Poppins'), local('Poppins-bold-italic'), url(${PoppinsBoldItalic}) format('truetype');
+          src: local('Poppins'), local('Poppins-bold-italic'), url(/assets/fonts/Poppins-BoldItalic.ttf) format('truetype');
           font-display: swap;
         }
         @font-face {
           font-family: 'Poppins';
           font-weight: 300;
-          src: local('Poppins'), local('Poppins-regular'), url(${PoppinsRegular}) format('truetype');
+          src: local('Poppins'), local('Poppins-regular'), url(/assets/fonts/Poppins-Regular.ttf) format('truetype');
           font-display: swap;
         }
         @font-face {
           font-family: 'Poppins';
           font-weight: 300;
           font-style: italic;
-          src: local('Poppins'), local('Poppins-regular'), url(${PoppinsRegularItalic}) format('truetype');
+          src: local('Poppins'), local('Poppins-regular'), url(/assets/fonts/Poppins-Italic.ttf) format('truetype');
           font-display: swap;
         }
         @font-face {
           font-family: 'Poppins';
           font-weight: 200;
-          src: local('Poppins'), local('Poppins-thin'), url(${PoppinsThin}) format('truetype');
+          src: local('Poppins'), local('Poppins-thin'), url(/assets/fonts/Poppins-Thin.ttf) format('truetype');
           font-display: swap;
         }
         @font-face {
           font-family: 'Poppins';
           font-weight: 200;
           font-style: italic;
-          src: local('Poppins'), local('Poppins-thin'), url(${PoppinsThinItalic}) format('truetype');
+          src: local('Poppins'), local('Poppins-thin'), url(/assets/fonts/Poppins-ThinItalic.ttf) format('truetype');
           font-display: swap;
         }
       `,
@@ -198,6 +196,7 @@ export const AxoTheme = createTheme({
     h5: HeaderStyle,
     fontFamily: [
       "'M PLUS 2'",
+      "'M PLUS 2 ext'",
       "Roboto",
       "sans-serif",
     ].join(","),