Set up fonts with optimised font loading
For local font loading, see https://nextjs.org/docs/app/building-your-application/optimizing/fonts#local-fonts For setting CSS variables for the fonts (which we use in our tokens), see https://nextjs.org/docs/app/api-reference/components/font#css-variables
This commit is contained in:
Vincent
Родитель
c5e491abf1
Коммит
14ec75557e
|
|
@ -13,6 +13,13 @@ const config: StorybookConfig = {
|
|||
docs: {
|
||||
autodocs: "tag",
|
||||
},
|
||||
staticDirs: [
|
||||
// See https://github.com/storybookjs/storybook/tree/4f0c895bc53116272ef598f19e8d869213be49a9/code/frameworks/nextjs#nextfontlocal
|
||||
{
|
||||
from: "../src/app/fonts",
|
||||
to: "src/app/fonts",
|
||||
},
|
||||
],
|
||||
async webpackFinal(config) {
|
||||
config.module ??= {};
|
||||
config.module.rules ??= [];
|
||||
|
|
|
|||
|
|
@ -1,13 +1,23 @@
|
|||
import React from "react";
|
||||
import { Inter } from "next/font/google";
|
||||
import type { Preview } from "@storybook/react";
|
||||
import { L10nProvider } from "../src/contextProviders/localization";
|
||||
import { getL10nBundles } from "../src/app/functions/server/l10n";
|
||||
import { metropolis } from "../src/app/fonts/Metropolis/metropolis";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
|
||||
|
||||
const AppDecorator: Exclude<Preview["decorators"], undefined>[0] = (
|
||||
storyFn
|
||||
) => {
|
||||
return (
|
||||
<L10nProvider bundleSources={getL10nBundles()}>{storyFn()}</L10nProvider>
|
||||
<L10nProvider bundleSources={getL10nBundles()}>
|
||||
<div
|
||||
className={`${inter.className} ${inter.variable} ${metropolis.variable}`}
|
||||
>
|
||||
{storyFn()}
|
||||
</div>
|
||||
</L10nProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
import localFont from "next/font/local";
|
||||
|
||||
export const metropolis = localFont({
|
||||
src: [
|
||||
{
|
||||
path: "./Metropolis-Bold.woff2",
|
||||
weight: "700",
|
||||
style: "normal",
|
||||
},
|
||||
{
|
||||
path: "./Metropolis-SemiBold.woff2",
|
||||
weight: "600",
|
||||
style: "normal",
|
||||
},
|
||||
{
|
||||
path: "./Metropolis-Medium.woff2",
|
||||
weight: "400",
|
||||
style: "normal",
|
||||
},
|
||||
],
|
||||
variable: "--font-metropolis",
|
||||
});
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
@font-face {
|
||||
font-family: Metropolis;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: optional;
|
||||
src: local("Metropolis-Bold"),
|
||||
url("./Metropolis/Metropolis-Bold.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Metropolis;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: optional;
|
||||
src: local("Metropolis-SemiBold"),
|
||||
url("./Metropolis/Metropolis-SemiBold.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Metropolis;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: optional;
|
||||
src: local("Metropolis-Medium"),
|
||||
url("./Metropolis/Metropolis-Medium.woff2") format("woff2");
|
||||
}
|
||||
|
|
@ -10,8 +10,9 @@ import { getLocale } from "./functions/server/l10n";
|
|||
import { SessionProvider } from "../contextProviders/session";
|
||||
import { authOptions } from "./api/auth/[...nextauth]/route";
|
||||
import { getL10n } from "./functions/server/l10n";
|
||||
import { metropolis } from "./fonts/Metropolis/metropolis";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
|
||||
|
||||
export async function generateMetadata() {
|
||||
const l10n = getL10n();
|
||||
|
|
@ -46,7 +47,7 @@ export default async function RootLayout({
|
|||
return (
|
||||
<html lang={currentLocale}>
|
||||
<body
|
||||
className={inter.className}
|
||||
className={`${inter.className} ${inter.variable} ${metropolis.variable}`}
|
||||
// DO NOT ADD SECRETS HERE: The following data attributes expose
|
||||
// variables that are being used in the public analytics scripts
|
||||
data-ga4-measurement-id={process.env.GA4_MEASUREMENT_ID}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import "./fonts/metropolis";
|
||||
|
||||
// Nebula Colours //
|
||||
// Purple:
|
||||
$color-purple-90: #321c64;
|
||||
|
|
@ -192,18 +190,18 @@ $layout-2xl: 192px;
|
|||
|
||||
// Typeface
|
||||
// Title copy
|
||||
$text-title-lg: 700 56px / 56px Metropolis, sans-serif;
|
||||
$text-title-md: 700 48px / 48px Metropolis, sans-serif;
|
||||
$text-title-sm: 700 38px / 40px Metropolis, sans-serif;
|
||||
$text-title-xs: 700 28px / 30px Metropolis, sans-serif;
|
||||
$text-title-2xs: 700 24px / 26px Metropolis, sans-serif;
|
||||
$text-title-3xs: 700 18px / 20px Metropolis, sans-serif;
|
||||
$text-title-lg: 700 56px / 56px var(--font-metropolis), sans-serif;
|
||||
$text-title-md: 700 48px / 48px var(--font-metropolis), sans-serif;
|
||||
$text-title-sm: 700 38px / 40px var(--font-metropolis), sans-serif;
|
||||
$text-title-xs: 700 28px / 30px var(--font-metropolis), sans-serif;
|
||||
$text-title-2xs: 700 24px / 26px var(--font-metropolis), sans-serif;
|
||||
$text-title-3xs: 700 18px / 20px var(--font-metropolis), sans-serif;
|
||||
|
||||
// Body copy
|
||||
$text-body-xl: 400 21px / 32px sans-serif;
|
||||
$text-body-lg: 400 18px / 27px sans-serif;
|
||||
$text-body-md: 400 16px / 24px sans-serif;
|
||||
$text-body-sm: 400 14px / 21px sans-serif;
|
||||
$text-body-xs: 400 12px / 18px sans-serif;
|
||||
$text-body-xl: 400 21px / 32px var(--font-inter) sans-serif;
|
||||
$text-body-lg: 400 18px / 27px var(--font-inter) sans-serif;
|
||||
$text-body-md: 400 16px / 24px var(--font-inter) sans-serif;
|
||||
$text-body-sm: 400 14px / 21px var(--font-inter) sans-serif;
|
||||
$text-body-xs: 400 12px / 18px var(--font-inter) sans-serif;
|
||||
|
||||
$tab-bar-height: 100px;
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче