From 2f7f0f87345d8df18242b8b879f8d50c654c5a3c Mon Sep 17 00:00:00 2001 From: Luke Vella Date: Sat, 21 Jan 2023 10:53:44 +0000 Subject: [PATCH] Use next/font to serve fonts (#419) --- package.json | 1 + src/pages/_app.tsx | 17 +++++++++++++++++ src/pages/_document.tsx | 4 ---- style.css | 2 +- tailwind.config.js | 4 ++-- yarn.lock | 5 +++++ 6 files changed, 26 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 85ee93976..35f54fe92 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 5dff92bfe..83f844851 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -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 = ({ Component, pageProps }) => { useCrispChat(); @@ -57,6 +68,12 @@ const MyApp: NextPage = ({ Component, pageProps }) => { /> + ); diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 80ad1723e..afe8684e1 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -24,10 +24,6 @@ export default function Document() { /> - diff --git a/style.css b/style.css index f94150c69..eedd98774 100644 --- a/style.css +++ b/style.css @@ -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 { diff --git a/tailwind.config.js b/tailwind.config.js index eea3e3c11..45d613553 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -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)", diff --git a/yarn.lock b/yarn.lock index 1ea8611f5..c689a24f3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"