frontend: Use @next/font

ganesh1997oli · Feb 16, 2023 · 2bb30bd · 2bb30bd
1 parent ab93670
commit 2bb30bd
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 19 deletions.
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -27,6 +27,7 @@
     "@emotion/server": "^11.10.0",
     "@emotion/styled": "^11.10.5",
     "@inkathon/contracts": "workspace:*",
+    "@next/font": "^13.1.6",
     "@polkadot/api": "^9.14.1",
     "@polkadot/api-contract": "^9.14.1",
     "@polkadot/extension-dapp": "^0.44.8",

diff --git a/packages/frontend/src/pages/_app.tsx b/packages/frontend/src/pages/_app.tsx
@@ -4,6 +4,7 @@ import { HotToastConfig } from '@components/layout/HotToastConfig'
 import { getDeployments } from '@deployments/deployments'
 import { cache } from '@emotion/css'
 import { CacheProvider } from '@emotion/react'
+import { Inconsolata } from '@next/font/google'
 import { UseInkathonProvider } from '@scio-labs/use-inkathon'
 import { env } from '@shared/environment'
 import GlobalStyles from '@styles/GlobalStyles'
@@ -18,6 +19,11 @@ Router.events.on('routeChangeStart', () => NProgress.start())
 Router.events.on('routeChangeComplete', () => NProgress.done())
 Router.events.on('routeChangeError', () => NProgress.done())
 
+// TODO Google Fonts via @next/font
+const inconsolata = Inconsolata({
+  subsets: ['latin'],
+})
+
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
@@ -48,6 +54,13 @@ function MyApp({ Component, pageProps }: AppProps) {
 
       <Head>
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+
+        {/* Set Font Variables */}
+        <style>{`
+          :root {
+            --font-inconsolata: ${inconsolata.style.fontFamily}, 'Inconsolata';
+          }
+        `}</style>
       </Head>
 
       <UseInkathonProvider

diff --git a/packages/frontend/src/pages/_document.tsx b/packages/frontend/src/pages/_document.tsx
@@ -13,6 +13,7 @@ export type NewDocumentInitialProps = DocumentInitialProps & {
   css: string
 }
 export default class MyDocument extends Document<NewDocumentInitialProps> {
+  // Emotion Critical SSR Styles
   static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
     const initialProps = await Document.getInitialProps(ctx)
     const critical = extractCritical(initialProps.html)
@@ -34,32 +35,17 @@ export default class MyDocument extends Document<NewDocumentInitialProps> {
     return (
       <Html lang="en">
         <Head>
-          {/* Emotion Inline Styles */}
-          <style
-            data-emotion-css={this.props?.ids?.join(' ')}
-            dangerouslySetInnerHTML={{ __html: this.props.css }}
-          />
-
           {/* TODO Manifest & Favicons */}
           {/* TIP: Generate it at https://realfavicongenerator.net/ */}
+          <link rel="shortcut icon" href="/favicon.ico" />
+          <link rel="manifest" href="/site.webmanifest" />
+          <meta name="msapplication-config" content="/browserconfig.xml" />
           <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
           <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
           <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
-          <link rel="manifest" href="/site.webmanifest" />
           <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#7e5da8" />
-          <link rel="shortcut icon" href="/favicon.ico" />
           <meta name="msapplication-TileColor" content="#7e5da8" />
-          <meta name="msapplication-config" content="/browserconfig.xml" />
           <meta name="theme-color" content="#000000" />
-
-          {/* TODO Import Fonts */}
-          {/* TIP: Generate locally served font-face rules & subsets at https://transfonter.org/ */}
-          <link rel="preconnect" href="https://fonts.googleapis.com" />
-          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
-          <link
-            href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;600;700;900&display=swap"
-            rel="stylesheet"
-          />
         </Head>
 
         <body>

diff --git a/packages/frontend/tailwind.config.js b/packages/frontend/tailwind.config.js
@@ -14,7 +14,7 @@ module.exports = {
         gray: colors.zinc,
       },
       fontFamily: {
-        mono: ['Inconsolata', ...defaultTheme.fontFamily.mono],
+        mono: ['var(--font-inconsolata)', ...defaultTheme.fontFamily.mono],
       },
     },
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml