Use next/font to serve fonts (#419)

This commit is contained in:
Luke Vella 2023-01-21 10:53:44 +00:00 committed by GitHub
parent fcb2d362c9
commit 2f7f0f8734
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 26 additions and 7 deletions

View file

@ -17,6 +17,7 @@
"@floating-ui/react-dom-interactions": "^0.4.0",
"@headlessui/react": "^1.6.6",
"@next/bundle-analyzer": "^12.1.0",
"@next/font": "^13.1.3",
"@prisma/client": "^4.9.0",
"@radix-ui/react-radio-group": "^1.1.0",
"@radix-ui/react-slider": "^1.0.0",

View file

@ -2,6 +2,7 @@ import "react-big-calendar/lib/css/react-big-calendar.css";
import "tailwindcss/tailwind.css";
import "~/style.css";
import { Inter, Noto_Sans_Mono } from "@next/font/google";
import { NextPage } from "next";
import { AppProps } from "next/app";
import Head from "next/head";
@ -16,6 +17,16 @@ import { useCrispChat } from "../components/crisp-chat";
import { absoluteUrl } from "../utils/absolute-url";
import { trpcNext } from "../utils/trpc";
const inter = Inter({
subsets: ["latin"],
display: "swap",
});
const noto = Noto_Sans_Mono({
subsets: ["latin"],
display: "swap",
});
const MyApp: NextPage<AppProps> = ({ Component, pageProps }) => {
useCrispChat();
@ -57,6 +68,12 @@ const MyApp: NextPage<AppProps> = ({ Component, pageProps }) => {
/>
</Head>
<Toaster />
<style jsx global>{`
html {
--font-inter: ${inter.style.fontFamily};
--font-noto: ${noto.style.fontFamily};
}
`}</style>
<Component {...pageProps} />
</PlausibleProvider>
);

View file

@ -24,10 +24,6 @@ export default function Document() {
/>
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="manifest" href="/site.webmanifest" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+Mono&display=optional"
rel="stylesheet"
/>
<meta name="theme-color" content="#f9fafb" />
</Head>
<body>

View file

@ -4,7 +4,7 @@
@layer base {
html {
@apply h-full overflow-auto bg-slate-50 text-base text-slate-600;
@apply h-full overflow-auto bg-slate-50 font-sans text-base text-slate-600;
}
body,
#__next {

View file

@ -35,8 +35,8 @@ module.exports = {
xs: "375px",
},
fontFamily: {
sans: ["Inter", ...defaultTheme.fontFamily.sans],
mono: ["Noto Sans Mono", ...defaultTheme.fontFamily.mono],
sans: ["var(--font-inter)", ...defaultTheme.fontFamily.sans],
mono: ["var(--font-noto)", ...defaultTheme.fontFamily.mono],
},
transitionTimingFunction: {
"in-expo": "cubic-bezier(0.68, -0.6, 0.32, 1.6)",

View file

@ -1200,6 +1200,11 @@
dependencies:
glob "7.1.7"
"@next/font@^13.1.3":
version "13.1.3"
resolved "https://registry.yarnpkg.com/@next/font/-/font-13.1.3.tgz#b8da6898537f341d7e1b35ec8ed686244503c076"
integrity sha512-Zh7lU8KlUoeidHPuXt9Xdvu+DFg74JXGaBczBgNwZAqvwT4HquQ1zJVfavXIQhDRPbQlKYI6Z25BFC2PhVHvtA==
"@next/swc-android-arm-eabi@13.1.3":
version "13.1.3"
resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.1.3.tgz#f038b4e76af750b56b884997e902a6096ee367f3"