.use next/font

2025-02-15 06:09:15 +01:00 · 2023-04-09 11:40:21 +02:00
parent 9cf213d556
commit 59d88339bd
3 changed files with 20 additions and 5 deletions
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -2,17 +2,25 @@ import { AppProps } from 'next/app';
 import { Analytics } from '@vercel/analytics/react';
 import { ThemeProvider } from 'next-themes';
 import Head from 'next/head';
+import { Inter } from 'next/font/google';
 import '@/styles/globals.scss';

+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+});
+
 export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title>albert</title>
      </Head>
+      <main className={`${inter.variable} font-sans`}>
        <ThemeProvider>
          <Component {...pageProps} />
        </ThemeProvider>
+      </main>
      <Analytics />
    </>
  );
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -1,11 +1,9 @@
-@import url('https://cdn.albert.lol/ClearSansRegular.woff');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
-    font-family: 'Clear Sans', sans-serif;
    scrollbar-width: thin;
    scrollbar-color: #8a58e0 transparent;
  }
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,17 @@
+const { fontFamily } = require('tailwindcss/defaultTheme');
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx}',
    './src/components/**/*.{js,ts,jsx,tsx}',
  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['var(--font-inter)', ...fontFamily.sans],
+      },
+    },
+  },
  plugins: [],
 };