Skip to content

Commit

Permalink
fonts
Browse files Browse the repository at this point in the history
  • Loading branch information
nlkluth committed Dec 7, 2023
1 parent 9125e9e commit 7217545
Show file tree
Hide file tree
Showing 7 changed files with 46 additions and 75 deletions.
72 changes: 0 additions & 72 deletions packages/nextjs/app/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,78 +6,6 @@ body {
@apply bg-secondary;
}

/* Cabinet Grotesk */
/* See: https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@500,700,400,300&display=swap */
/* See: https://nextjs.org/docs/app/building-your-application/styling/css-modules#external-stylesheets */
@font-face {
font-family: 'Cabinet Grotesk';
src: url('//cdn.fontshare.com/wf/7GWNQ5AHAZORLOWZ7ELKPLOIQITAR5S5/NYLYMGXMB4RANWVNJSIHG2IKPZ44CN5E/MT4CWVHB3N2C6KFUZ75QK4JQ2FYK4J4M.woff2') format('woff2'),
url('//cdn.fontshare.com/wf/7GWNQ5AHAZORLOWZ7ELKPLOIQITAR5S5/NYLYMGXMB4RANWVNJSIHG2IKPZ44CN5E/MT4CWVHB3N2C6KFUZ75QK4JQ2FYK4J4M.woff') format('woff'),
url('//cdn.fontshare.com/wf/7GWNQ5AHAZORLOWZ7ELKPLOIQITAR5S5/NYLYMGXMB4RANWVNJSIHG2IKPZ44CN5E/MT4CWVHB3N2C6KFUZ75QK4JQ2FYK4J4M.ttf') format('truetype');
font-weight: 300;
font-display: swap;
font-style: normal;
}

@font-face {
font-family: 'Cabinet Grotesk';
src: url('//cdn.fontshare.com/wf/J6PPRPKWXDUIYA47IXLEQB4R4OPVYDQH/N2ZXAXWEHVMLISD2TIXJC7EF4GOY43L4/NXM4Z4TDCMYWBZ7AVI2N6DQ5VMWNENMU.woff2') format('woff2'),
url('//cdn.fontshare.com/wf/J6PPRPKWXDUIYA47IXLEQB4R4OPVYDQH/N2ZXAXWEHVMLISD2TIXJC7EF4GOY43L4/NXM4Z4TDCMYWBZ7AVI2N6DQ5VMWNENMU.woff') format('woff'),
url('//cdn.fontshare.com/wf/J6PPRPKWXDUIYA47IXLEQB4R4OPVYDQH/N2ZXAXWEHVMLISD2TIXJC7EF4GOY43L4/NXM4Z4TDCMYWBZ7AVI2N6DQ5VMWNENMU.ttf') format('truetype');
font-weight: 400;
font-display: swap;
font-style: normal;
}

@font-face {
font-family: 'Cabinet Grotesk';
src: url('//cdn.fontshare.com/wf/CKQBK2QBTCDREE7L3MXZ3PPW7LDNJCWU/OTOY7FQFSFOJVZKJWKO2EHUJLOGBDN4Q/4CO2ETY7NITKLUDKMYJ75RHJSPHOJ7XT.woff2') format('woff2'),
url('//cdn.fontshare.com/wf/CKQBK2QBTCDREE7L3MXZ3PPW7LDNJCWU/OTOY7FQFSFOJVZKJWKO2EHUJLOGBDN4Q/4CO2ETY7NITKLUDKMYJ75RHJSPHOJ7XT.woff') format('woff'),
url('//cdn.fontshare.com/wf/CKQBK2QBTCDREE7L3MXZ3PPW7LDNJCWU/OTOY7FQFSFOJVZKJWKO2EHUJLOGBDN4Q/4CO2ETY7NITKLUDKMYJ75RHJSPHOJ7XT.ttf') format('truetype');
font-weight: 500;
font-display: swap;
font-style: normal;
}

@font-face {
font-family: 'Cabinet Grotesk';
src: url('//cdn.fontshare.com/wf/XMXWOHABYLQDJ42L65EFRYNVRY37HQCB/B2O4O6V3JMFM2WDCYQI3A47L5U4THDUL/WN5274VQ3AUBDFP74GB4EC4XYJ3EKVNE.woff2') format('woff2'),
url('//cdn.fontshare.com/wf/XMXWOHABYLQDJ42L65EFRYNVRY37HQCB/B2O4O6V3JMFM2WDCYQI3A47L5U4THDUL/WN5274VQ3AUBDFP74GB4EC4XYJ3EKVNE.woff') format('woff'),
url('//cdn.fontshare.com/wf/XMXWOHABYLQDJ42L65EFRYNVRY37HQCB/B2O4O6V3JMFM2WDCYQI3A47L5U4THDUL/WN5274VQ3AUBDFP74GB4EC4XYJ3EKVNE.ttf') format('truetype');
font-weight: 700;
font-display: swap;
font-style: normal;
}


@font-face {
font-family: "JeanLuc";
src: url('../assets/fonts/jeanluc/jeanlucweb-bold.woff');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: "JeanLuc";
src: url('../assets/fonts/jeanluc/jeanlucweb-thin.woff');
font-weight: auto;
font-style: normal;
}

@font-face {
font-family: "JetBrains Mono";
src: url('../assets/fonts/jetbrainsmono/JetBrainsMono-Bold.woff2');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: "JetBrains Mono";
src: url('../assets/fonts/jetbrainsmono/JetBrainsMono-Regular.woff2');
font-weight: auto;
font-style: normal;
}

code {
@apply rounded-md bg-black/5 px-1.5 py-0.5;
font-family: 'JetBrains Mono', monospace;
Expand Down
45 changes: 44 additions & 1 deletion packages/nextjs/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Header } from "components/Header/Header";
import { Metadata } from "next";
import { CartProvider } from "components/CartContext";
import { AnimatePresence, MotionConfig } from "./ui/framer";
import localFont from "next/font/local";

export const metadata: Metadata = {
title: "Home",
Expand All @@ -14,9 +15,51 @@ export const viewport = {
width: "device-width",
};

const cabinetFont = localFont({
src: [
{
path: "../assets/fonts/cabinetgrotesk/cabinetgrotesk-300.woff2",
weight: "300",
style: "normal",
},
{
path: "../assets/fonts/cabinetgrotesk/cabinetgrotesk-400.woff2",
weight: "400",
style: "normal",
},
{
path: "../assets/fonts/cabinetgrotesk/cabinetgrotesk-500.woff2",
weight: "500",
style: "normal",
},
{
path: "../assets/fonts/cabinetgrotesk/cabinetgrotesk-700.woff2",
weight: "700",
style: "normal",
},
],
variable: "--font-cabinet",
});

const jeanLuc = localFont({
src: [
{
path: "../assets/fonts/jeanLuc/jeanlucweb-bold.woff",
weight: "bold",
style: "normal",
},
{
path: "../assets/fonts/jeanLuc/jeanlucweb-thin.woff",
weight: "normal",
style: "normal",
},
],
variable: "--font-jeanLuc",
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<html lang="en" className={`${cabinetFont.variable} ${jeanLuc.variable}`}>
<body>
<MotionConfig reducedMotion="user">
<CartProvider>
Expand Down
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
4 changes: 2 additions & 2 deletions packages/nextjs/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ module.exports = {
},
},
fontFamily: {
sans: ["Cabinet Grotesk", ...defaultTheme.fontFamily.sans],
jeanLuc: ["JeanLuc", ...defaultTheme.fontFamily.sans],
sans: ["var(--font-cabinet)", ...defaultTheme.fontFamily.sans],
jeanLuc: ["var(--font-jeanLuc)", ...defaultTheme.fontFamily.sans],
},
backgroundImage: {
// converted to data url from Figma export
Expand Down

0 comments on commit 7217545

Please sign in to comment.