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 components;
|
||||||
@tailwind utilities;
|
@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",
|
"@hookform/resolvers": "^2.9.7",
|
||||||
"@next-auth/prisma-adapter": "^1.0.4",
|
"@next-auth/prisma-adapter": "^1.0.4",
|
||||||
"@next/bundle-analyzer": "^12.2.5",
|
"@next/bundle-analyzer": "^12.2.5",
|
||||||
|
"@next/font": "^13.1.1",
|
||||||
"@radix-ui/react-avatar": "^1.0.0",
|
"@radix-ui/react-avatar": "^1.0.0",
|
||||||
"@radix-ui/react-collapsible": "^1.0.0",
|
"@radix-ui/react-collapsible": "^1.0.0",
|
||||||
"@radix-ui/react-dialog": "^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 { DefaultSeo } from "next-seo";
|
||||||
import Head from "next/head";
|
import Head from "next/head";
|
||||||
import Script from "next/script";
|
import Script from "next/script";
|
||||||
|
|
@ -14,6 +16,14 @@ import I18nLanguageHandler from "@components/I18nLanguageHandler";
|
||||||
|
|
||||||
import "../styles/globals.css";
|
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) {
|
function MyApp(props: AppProps) {
|
||||||
const { Component, pageProps, err, router } = props;
|
const { Component, pageProps, err, router } = props;
|
||||||
let pageStatus = "200";
|
let pageStatus = "200";
|
||||||
|
|
@ -46,6 +56,12 @@ function MyApp(props: AppProps) {
|
||||||
id="page-status"
|
id="page-status"
|
||||||
dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }}
|
dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }}
|
||||||
/>
|
/>
|
||||||
|
<style jsx global>{`
|
||||||
|
:root {
|
||||||
|
--font-inter: ${interFont.style.fontFamily};
|
||||||
|
--font-cal: ${calFont.style.fontFamily};
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
<Head>
|
<Head>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
||||||
</Head>
|
</Head>
|
||||||
|
|
|
||||||
|
|
@ -39,14 +39,6 @@ class MyDocument extends Document<Props> {
|
||||||
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
|
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
|
||||||
<meta name="msapplication-TileColor" content="#ff0000" />
|
<meta name="msapplication-TileColor" content="#ff0000" />
|
||||||
<meta name="theme-color" content="#ffffff" />
|
<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" />
|
<Script src="/embed-init-iframe.js" strategy="beforeInteractive" />
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
@import "../../../packages/ui/styles/shared-globals.css";
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
const plugin = require("tailwindcss/plugin");
|
const plugin = require("tailwindcss/plugin");
|
||||||
|
const { fontFamily } = require("tailwindcss/defaultTheme");
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
|
||||||
|
|
@ -12,10 +13,6 @@ module.exports = {
|
||||||
],
|
],
|
||||||
darkMode: "class",
|
darkMode: "class",
|
||||||
theme: {
|
theme: {
|
||||||
fontFamily: {
|
|
||||||
cal: ['"Cal Sans"', "sans-serif"],
|
|
||||||
sans: ['"Inter var"', "sans-serif"],
|
|
||||||
},
|
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
/* your primary brand color */
|
/* your primary brand color */
|
||||||
|
|
@ -162,9 +159,9 @@ module.exports = {
|
||||||
dropdown: "0px 2px 6px -1px rgba(0, 0, 0, 0.08)",
|
dropdown: "0px 2px 6px -1px rgba(0, 0, 0, 0.08)",
|
||||||
},
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
cal: ['"Cal Sans"', "sans-serif"],
|
cal: ["var(--font-cal)", ...fontFamily.serif],
|
||||||
|
sans: ["var(--font-inter)", ...fontFamily.sans],
|
||||||
mono: ["Roboto Mono", "monospace"],
|
mono: ["Roboto Mono", "monospace"],
|
||||||
sans: ['"Inter var"', "sans-serif"],
|
|
||||||
},
|
},
|
||||||
maxHeight: (theme) => ({
|
maxHeight: (theme) => ({
|
||||||
0: "0",
|
0: "0",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue