fix(fonts): replace google font with next/font

zesty-io · Nov 3, 2023 · a4e1599 · a4e1599
1 parent 5c3a278
commit a4e1599
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/src/pages/_app.js b/src/pages/_app.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unknown-property */
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Page from '../components/wrappers/Page';
@@ -17,6 +18,13 @@ import AuthProvider from 'components/context/AuthProvider';
 import '/public/styles/app.css';
 import '/public/styles/docs.css';
 
+import { Mulish } from 'next/font/google';
+const mulis = Mulish({
+  weight: ['300', '400', '600', '500', '700', '800', '900', '1000'],
+  style: ['normal', 'italic'],
+  subsets: ['latin'],
+});
+
 if (process.env.NODE_ENV === 'production') {
   console.log = () => {};
   console.debug = () => {};
@@ -62,6 +70,11 @@ export default function App({ Component, pageProps }) {
 
   return (
     <AuthProvider value={pageProps?.zesty}>
+      <style jsx global>{`
+        html {
+          font-family: ${mulis.style.fontFamily};
+        }
+      `}</style>
       {pageProps?.meta?.web && <ZestyHead content={pageProps} />}
       <Head>
         {GTM_ID && (

diff --git a/src/pages/_document.js b/src/pages/_document.js
@@ -11,7 +11,6 @@ const getCache = () => {
   return cache;
 };
 
-const GOOGLE_FONT = `https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800;900&display=swap`;
 const fetchUrl =
   process.env.NEXT_PUBLIC_FETCH_WRAPPER_URL ||
   'https://cdn.jsdelivr.net/gh/zesty-io/fetch-wrapper@latest/dist/index.js';
@@ -33,8 +32,6 @@ export default class MyDocument extends Document {
           />
           <link rel="preconnect" href="https://fonts.googleapis.com" />
 
-          <link href={GOOGLE_FONT} rel="stylesheet" />
-
           <link
             href="https://fonts.googleapis.com/icon?family=Material+Icons"
             rel="stylesheet"

diff --git a/src/theme/index.js b/src/theme/index.js
@@ -7,14 +7,21 @@ import {
   dark as darkAccounts,
 } from './paletteAccounts';
 import { theme } from '@zesty-io/material';
+import { Mulish } from 'next/font/google';
+
+const mulis = Mulish({
+  weight: ['300', '400', '600', '500', '700', '800', '900', '1000'],
+  style: ['normal', 'italic'],
+  subsets: ['latin'],
+});
 const getTheme = (mode, themeToggler) =>
   responsiveFontSizes(
     createTheme({
       ...theme,
       palette: mode === 'light' ? light : dark,
       shadows: shadows(mode),
       typography: {
-        fontFamily: '"Mulish", Arial',
+        fontFamily: `${mulis.style.fontFamily}, 'Arial'`,
         button: {
           textTransform: 'none',
           fontWeight: 'medium',
@@ -83,7 +90,7 @@ export const getThemeAccounts = (mode, themeToggler) =>
       palette: mode === 'light' ? lightAccounts : darkAccounts,
       shadows: shadows(mode),
       typography: {
-        fontFamily: '"Mulish", Arial',
+        fontFamily: `${mulis.style.fontFamily}, 'Arial'`,
         button: {
           textTransform: 'none',
           fontWeight: 'medium',