.use next/font

This commit is contained in:
skidoodle 2023-04-09 11:40:21 +02:00
parent 9cf213d556
commit 59d88339bd
3 changed files with 20 additions and 5 deletions

View file

@ -2,17 +2,25 @@ import { AppProps } from 'next/app';
import { Analytics } from '@vercel/analytics/react'; import { Analytics } from '@vercel/analytics/react';
import { ThemeProvider } from 'next-themes'; import { ThemeProvider } from 'next-themes';
import Head from 'next/head'; import Head from 'next/head';
import { Inter } from 'next/font/google';
import '@/styles/globals.scss'; import '@/styles/globals.scss';
const inter = Inter({
subsets: ['latin'],
variable: '--font-inter',
});
export default function App({ Component, pageProps }: AppProps) { export default function App({ Component, pageProps }: AppProps) {
return ( return (
<> <>
<Head> <Head>
<title>albert</title> <title>albert</title>
</Head> </Head>
<ThemeProvider> <main className={`${inter.variable} font-sans`}>
<Component {...pageProps} /> <ThemeProvider>
</ThemeProvider> <Component {...pageProps} />
</ThemeProvider>
</main>
<Analytics /> <Analytics />
</> </>
); );

View file

@ -1,11 +1,9 @@
@import url('https://cdn.albert.lol/ClearSansRegular.woff');
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer base { @layer base {
html { html {
font-family: 'Clear Sans', sans-serif;
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: #8a58e0 transparent; scrollbar-color: #8a58e0 transparent;
} }

View file

@ -1,8 +1,17 @@
const { fontFamily } = require('tailwindcss/defaultTheme');
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: [ content: [
'./src/pages/**/*.{js,ts,jsx,tsx}', './src/pages/**/*.{js,ts,jsx,tsx}',
'./src/components/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx}',
], ],
theme: {
extend: {
fontFamily: {
sans: ['var(--font-inter)', ...fontFamily.sans],
},
},
},
plugins: [], plugins: [],
}; };