feat: use `@next/font` for font loading (#6346)
Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Alex van Andel <me@alexvanandel.com>pull/7104/head
Nafees Nazik
GitHub
parent
48e5d18ea1
commit
1433ec6946
|
|
@ -2,4 +2,9 @@
|
|||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@import "../../../packages/ui/styles/shared-globals.css"
|
||||
@import "../../../packages/ui/styles/shared-globals.css";
|
||||
|
||||
:root {
|
||||
--font-inter: "Inter var";
|
||||
--font-cal: "Cal Sans";
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -45,6 +45,7 @@
|
|||
"@hookform/resolvers": "^2.9.7",
|
||||
"@next-auth/prisma-adapter": "^1.0.4",
|
||||
"@next/bundle-analyzer": "^12.2.5",
|
||||
"@next/font": "^13.1.1",
|
||||
"@radix-ui/react-avatar": "^1.0.0",
|
||||
"@radix-ui/react-collapsible": "^1.0.0",
|
||||
"@radix-ui/react-dialog": "^1.0.0",
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { Inter } from "@next/font/google";
|
||||
import localFont from "@next/font/local";
|
||||
import { DefaultSeo } from "next-seo";
|
||||
import Head from "next/head";
|
||||
import Script from "next/script";
|
||||
|
|
@ -14,6 +16,14 @@ import I18nLanguageHandler from "@components/I18nLanguageHandler";
|
|||
|
||||
import "../styles/globals.css";
|
||||
|
||||
const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
|
||||
const calFont = localFont({
|
||||
src: "../fonts/CalSans-SemiBold.woff2",
|
||||
variable: "--font-cal",
|
||||
preload: true,
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
function MyApp(props: AppProps) {
|
||||
const { Component, pageProps, err, router } = props;
|
||||
let pageStatus = "200";
|
||||
|
|
@ -46,6 +56,12 @@ function MyApp(props: AppProps) {
|
|||
id="page-status"
|
||||
dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }}
|
||||
/>
|
||||
<style jsx global>{`
|
||||
:root {
|
||||
--font-inter: ${interFont.style.fontFamily};
|
||||
--font-cal: ${calFont.style.fontFamily};
|
||||
}
|
||||
`}</style>
|
||||
<Head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
||||
</Head>
|
||||
|
|
|
|||
|
|
@ -39,14 +39,6 @@ class MyDocument extends Document<Props> {
|
|||
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
|
||||
<meta name="msapplication-TileColor" content="#ff0000" />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
<link
|
||||
rel="preload"
|
||||
href="/fonts/Inter-roman.var.woff2"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
crossOrigin="anonymous"
|
||||
/>
|
||||
<link rel="preload" href="/fonts/cal.ttf" as="font" type="font/ttf" crossOrigin="anonymous" />
|
||||
<Script src="/embed-init-iframe.js" strategy="beforeInteractive" />
|
||||
</Head>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@import "../../../packages/ui/styles/shared-globals.css";
|
||||
|
||||
|
||||
body {
|
||||
text-rendering: optimizeLegibility;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
const plugin = require("tailwindcss/plugin");
|
||||
const { fontFamily } = require("tailwindcss/defaultTheme");
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
|
||||
|
|
@ -12,10 +13,6 @@ module.exports = {
|
|||
],
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
fontFamily: {
|
||||
cal: ['"Cal Sans"', "sans-serif"],
|
||||
sans: ['"Inter var"', "sans-serif"],
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
/* your primary brand color */
|
||||
|
|
@ -162,9 +159,9 @@ module.exports = {
|
|||
dropdown: "0px 2px 6px -1px rgba(0, 0, 0, 0.08)",
|
||||
},
|
||||
fontFamily: {
|
||||
cal: ['"Cal Sans"', "sans-serif"],
|
||||
cal: ["var(--font-cal)", ...fontFamily.serif],
|
||||
sans: ["var(--font-inter)", ...fontFamily.sans],
|
||||
mono: ["Roboto Mono", "monospace"],
|
||||
sans: ['"Inter var"', "sans-serif"],
|
||||
},
|
||||
maxHeight: (theme) => ({
|
||||
0: "0",
|
||||
|
|
|
|||
Loading…
Reference in New Issue