jackmechem/server-dash
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Switched to local fonts

Browse source
This commit is contained in:
Jack Mechem 2026-03-28 18:23:52 -07:00
parent 2bc4311479
commit 8d06749627
5 changed files with 77 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

81
app/globals.css
View file

@ -1,56 +1,79 @@
@import "tailwindcss";
@font-face {
font-family: "DM Sans";
src: url("/fonts/DMSans.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Playfair Display";
src: url("/fonts/PlayfairDisplay.woff2") format("woff2");
font-display: swap;
}
:root {
--background: #f9fafb;
--foreground: #111827;
--background: #f9fafb;
--foreground: #111827;
--font-dm-sans: "DM Sans", sans-serif;
--font-playfair: "Playfair Display", serif;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
/* Link Tailwind to the Next.js Font Variables */
--font-sans: var(--font-dm-sans), ui-sans-serif, system-ui;
--font-serif: var(--font-playfair), ui-serif, Georgia;
--color-background: var(--background);
--color-foreground: var(--foreground);
/* Link Tailwind to the Next.js Font Variables */
--font-sans: var(--font-dm-sans), ui-sans-serif, system-ui;
--font-serif: var(--font-playfair), ui-serif, Georgia;
}
body {
background: var(--background);
color: var(--foreground);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
background: var(--background);
color: var(--foreground);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
}
/* --- Animations --- */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes shimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
from {
background-position: 200% 0;
}
to {
background-position: -200% 0;
}
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.25; }
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.25;
}
}
.animate-fade-up {
animation: fadeUp 0.45s ease both;
animation: fadeUp 0.45s ease both;
}
.skeleton {
background: linear-gradient(90deg, #f3f4f6 25%, #e9eaec 50%, #f3f4f6 75%);
background-size: 200% 100%;
animation: shimmer 1.4s infinite;
border-radius: 8px;
background: linear-gradient(90deg, #f3f4f6 25%, #e9eaec 50%, #f3f4f6 75%);
background-size: 200% 100%;
animation: shimmer 1.4s infinite;
border-radius: 8px;
}

14
app/layout.tsx
View file

@ -2,18 +2,6 @@ import type { Metadata } from "next";
import { DM_Sans, Playfair_Display } from "next/font/google"; // Import your specific fonts
import "./globals.css";
const dmSans = DM_Sans({
variable: "--font-dm-sans",
subsets: ["latin"],
display: "swap",
});
const playfair = Playfair_Display({
variable: "--font-playfair",
subsets: ["latin"],
display: "swap",
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
@ -28,7 +16,7 @@ export default function RootLayout({
<html
lang="en"
// Add the new font variables here
className={`${dmSans.variable} ${playfair.variable} h-full antialiased`}
className={`h-full antialiased`}
>
<body className="min-h-full h-full flex flex-col">{children}</body>
</html>