perf(fonts): ⚡ Use next/font with local font serving

BuildTheEarth · Jan 21, 2024 · 1bc2d43 · 1bc2d43
1 parent f8018b1
commit 1bc2d43
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 742 deletions.
diff --git a/package.json b/package.json
@@ -16,7 +16,6 @@
 		"@bte-germany/terraconvert": "^1.1.2",
 		"@emotion/react": "^11.10.4",
 		"@emotion/server": "^11.10.0",
-		"@fullhuman/postcss-purgecss": "^5.0.0",
 		"@icons-pack/react-simple-icons": "^5.5.0",
 		"@mantine/carousel": "^7.0.0",
 		"@mantine/core": "^7.0.0",
@@ -68,14 +67,11 @@
 		"next-i18next": "^13.0.3",
 		"next-seo": "^6.1.0",
 		"oauth-pkce": "^0.0.6",
-		"postcss-flexbugs-fixes": "^5.0.2",
-		"postcss-preset-env": "^9.3.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-i18next": "^11.18.6",
 		"react-map-gl": "^7.0.16",
 		"sanitize-html": "^2.10.0",
-		"sharp": "^0.33.2",
 		"swr": "^2.2.4",
 		"tabler-icons-react": "^1.48.0",
 		"three": "^0.149.0",
@@ -105,6 +101,7 @@
 		"postcss-preset-mantine": "^1.7.0",
 		"postcss-simple-vars": "^7.0.1",
 		"prettier": "^2.6.2",
+		"sharp": "^0.33.2",
 		"typescript": "^4.7.2",
 		"webpack-bundle-analyzer": "^4.5.0"
 	}

diff --git a/postcss.config.js b/postcss.config.js
@@ -10,20 +10,5 @@ module.exports = {
 				'mantine-breakpoint-xl': '88em',
 			},
 		},
-		'postcss-flexbugs-fixes': {},
-		'postcss-preset-env': {
-			autoprefixer: {
-				flexbox: 'no-2009',
-			},
-			stage: 3,
-			features: {
-				'custom-properties': false,
-			},
-		},
-		'@fullhuman/postcss-purgecss': {
-			content: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
-			defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
-			safelist: ['html', 'body'],
-		},
 	},
 };
diff --git a/src/components/BackgroundImage.tsx b/src/components/BackgroundImage.tsx
@@ -17,8 +17,8 @@ export default function Background({
 				onClick={props.onClick}
 			>
 				<Image
-					{...props} //@ts-ignore
-					rootStyle={undefined}
+					// {...props} //@ts-ignore
+					// rootStyle={undefined}
 					alt="Mountains"
 					src={src}
 					placeholder={typeof src != 'string' || !!props.blurDataURL ? 'blur' : undefined}
@@ -31,6 +31,7 @@ export default function Background({
 						height: '100%',
 						...props.style,
 					}}
+					blurDataURL={props.blurDataURL}
 				/>
 				{children}
 			</div>

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -18,12 +18,25 @@ import { SessionProvider } from 'next-auth/react';
 import { appWithTranslation } from 'next-i18next';
 import { DefaultSeo } from 'next-seo';
 import type { AppProps } from 'next/app';
+import { Inter } from 'next/font/google';
+import localFont from 'next/font/local';
 import { useEffect } from 'react';
 import defaultSeo from '../../next-seo.config';
 import CookieBanner from '../components/CookieBanner';
 import { RouterTransition } from '../components/RouterTransition';
 import SWRSetup from '../components/SWRSetup';
 
+export const interFont = Inter({
+	subsets: ['latin'],
+	variable: '--font-inter',
+});
+export const minecraftFont = localFont({
+	src: '../../public/fonts/Minecraft.ttf',
+	weight: '100 900',
+	display: 'swap',
+	style: 'normal',
+});
+
 function MyApp({ Component, pageProps }: AppProps) {
 	const [accessToken, setAccessToken] = useLocalStorage<string>({
 		key: 'accessToken',
@@ -45,32 +58,40 @@ function MyApp({ Component, pageProps }: AppProps) {
 	});
 
 	return (
-		<SessionProvider session={pageProps.session}>
-			<DefaultSeo {...defaultSeo} />
-			<MantineProvider
-				defaultColorScheme="dark"
-				theme={{
-					fontFamily:
-						'"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
-					breakpoints: {
-						xs: '36em',
-						sm: '48em',
-						md: '62em',
-						lg: '75em',
-						xl: '88em',
-					},
-				}}
-			>
-				<ModalsProvider>
-					<Notifications />
-					<CookieBanner />
-					<SWRSetup>
-						<RouterTransition />
-						<Component {...pageProps} />
-					</SWRSetup>
-				</ModalsProvider>
-			</MantineProvider>
-		</SessionProvider>
+		<>
+			<style jsx global>{`
+				html {
+					--font-inter: ${interFont.style.fontFamily};
+					--font-minecraft: ${minecraftFont.style.fontFamily};
+				}
+			`}</style>
+			<SessionProvider session={pageProps.session}>
+				<DefaultSeo {...defaultSeo} />
+				<MantineProvider
+					defaultColorScheme="dark"
+					theme={{
+						fontFamily:
+							'var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+						breakpoints: {
+							xs: '36em',
+							sm: '48em',
+							md: '62em',
+							lg: '75em',
+							xl: '88em',
+						},
+					}}
+				>
+					<ModalsProvider>
+						<Notifications />
+						<CookieBanner />
+						<SWRSetup>
+							<RouterTransition />
+							<Component {...pageProps} />
+						</SWRSetup>
+					</ModalsProvider>
+				</MantineProvider>
+			</SessionProvider>
+		</>
 	);
 }
 

diff --git a/src/styles/components/Header.module.css b/src/styles/components/Header.module.css
@@ -31,7 +31,7 @@
 }
 
 .logo {
-	font-family: Minecraft;
+	font-family: var(--font-minecraft);
 	font-size: 20px;
 	position: relative;
 	top: 2px;

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -1,38 +1,10 @@
-@font-face {
-	font-family: 'Plus Jakarta Display Bold';
-	src: url('https://tokotype.github.io/plusjakarta-sans/fonts/PlusJakartaDisplay-Bold.woff')
-		format('woff2');
-	font-weight: 400;
-	font-style: normal;
-	font-display: swap;
-}
-
-@font-face {
-	font-family: 'Minecraft';
-	src: url('../../public/fonts/Minecraft.ttf');
-	font-weight: normal;
-	font-style: normal;
-	font-display: swap;
-}
-
-@font-face {
-	font-family: Inter;
-	font-style: normal;
-	font-weight: 100 900;
-	font-display: optional;
-	src: url('../../public/fonts/Inter.var.latin.woff2') format('woff2');
-	unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+2000-206f,
-		U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd;
-	font-display: swap;
-}
-
 html,
 body,
 #__next {
 	scroll-behavior: smooth;
 	padding: 0;
 	margin: 0;
-	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+	font-family: var(--font-inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
 		'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 	width: 100%;
 	height: 100%;
@@ -49,7 +21,7 @@ a {
 
 * {
 	box-sizing: border-box;
-	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+	font-family: var(--font-inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
 		'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 }