feat: Next 13 global fonts (#2313)

## What's the purpose of this pull request? This PR intends to introduce `next/font` built-in feature to the project (`app` directory). The `babelrc.js` config file needed to be removed in favor of `next/font` usage, [it's mandatory](https://nextjs.org/docs/messages/babel-font-loader-conflict). Next.js requires the use of its own compiler (SWC) config, so for now we still don't have the necessary GraphQL Codegen plugin to replace the `@graphql-codegen/client-preset` being loaded in the Babel config file, as the existing one ([`@graphql-codegen/client-preset-swc-plugin`](https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#swc-plugin)) has a bug that hasn't been solved yet (see [here](dotansimha/graphql-code-generator#9753) and [here](dotansimha/graphql-code-generator#9450). Also, right now we are just introducing the feature, but we will have to support local fonts and font override later in other tasks. ## How to test it? - Run the local server (`yarn turbo run dev --filter=@faststore/core`); - Make sure that all the current pages are working as expected (`/`, `/office` and some `/<slug>/p`); - Make sure `/fs-next-update` is rendering with some text on the top of the page and without errors. ## References - https://nextjs.org/blog/next-13#nextfont - https://nextjs.org/docs/app/api-reference/components/font#css-variables - https://nextjs.org/docs/app/building-your-application/optimizing/fonts
vtex · May 16, 2024 · 1ca0ce0 · 1ca0ce0
1 parent 2bae747
commit 1ca0ce0
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 19 deletions.
diff --git a/packages/core/.babelrc.js b/packages/core/.babelrc.js
diff --git a/packages/core/README.md b/packages/core/README.md
@@ -43,7 +43,6 @@ A quick look at the top-level files and directories you'll see in a this NextJS
     ├── public
     ├── src
     ├── test
-    ├── .babelrc.js
     ├── .editorconfig
     ├── .prettierignore
     ├── .prettierrrc

diff --git a/packages/core/app/layout.tsx b/packages/core/app/layout.tsx
@@ -9,7 +9,9 @@ import ThirdPartyScripts from 'app/components/ThirdPartyScripts'
 import AnalyticsHandler from 'app/sdk/analytics'
 import ErrorBoundary from 'app/sdk/error/ErrorBoundary'
 import UIProvider from 'app/sdk/ui/UIProvider'
-import { WebFonts } from 'src/customizations/src/GlobalOverrides'
+
+// TODO: The path will probably change when overriding fonts in the future
+import DefaultFont from 'app/styles/fonts'
 
 // import GlobalSections from './components/cms/GlobalSections'
 
@@ -78,11 +80,12 @@ export default async function RootLayout({
       <AnalyticsHandler />
 
       <html>
-        <head>
-          {!process.env.DISABLE_3P_SCRIPTS && <ThirdPartyScripts />}
-          <WebFonts />
-        </head>
-        <body className="theme">
+        <head>{!process.env.DISABLE_3P_SCRIPTS && <ThirdPartyScripts />}</head>
+        {/**
+         * TODO: Later when overriding fonts we should use the font variable in CSS files
+         * https://nextjs.org/docs/app/api-reference/components/font#css-variables
+         */}
+        <body className={`theme ${DefaultFont.className}`}>
           <UIProvider>
             <>
               {/*    <GlobalSections {...globalSections}>{children}</GlobalSections>*/}

diff --git a/packages/core/app/styles/fonts/index.tsx b/packages/core/app/styles/fonts/index.tsx
@@ -0,0 +1,10 @@
+import { Inter } from 'next/font/google'
+
+const customFont = Inter({
+  display: 'swap',
+  variable: '--fs-font-inter',
+  weight: ['400', '500', '600', '700', '900'],
+  subsets: ['latin'], // Either define subsets or set preload to false https://nextjs.org/docs/messages/google-fonts-missing-subsets
+})
+
+export default customFont