diff --git a/app/layout.tsx b/app/layout.tsx index 1f96917..ae8b040 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,5 +1,6 @@ import { type ReactNode } from "react"; import { type Metadata, type Viewport } from "next"; +import { Philosopher, Lora } from "next/font/google"; import Header from "@azure-fundamentals/components/Header"; import Footer from "@azure-fundamentals/components/Footer"; import ApolloProvider from "@azure-fundamentals/components/ApolloProvider"; @@ -9,6 +10,20 @@ import { ThemeProvider } from "@azure-fundamentals/contexts/ThemeContext"; import { TrialWarning } from "@azure-fundamentals/components/TrialWarning"; import "styles/globals.css"; +const philosopher = Philosopher({ + weight: ["400"], + subsets: ["latin"], + display: "swap", + variable: "--font-philosopher", +}); + +const lora = Lora({ + weight: ["400"], + subsets: ["latin"], + display: "swap", + variable: "--font-lora", +}); + export const viewport: Viewport = { themeColor: "#3f51b5", width: "device-width", @@ -107,7 +122,9 @@ type RootLayoutProps = { export default function RootLayout({ children }: RootLayoutProps) { return ( - + diff --git a/styles/globals.css b/styles/globals.css index ec5e3d7..e21d295 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -628,3 +628,12 @@ input[type="text"]:focus { box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.2) !important; } +/* Apply Philosopher font to headings and buttons */ +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-philosopher), serif; +} + +button, .btn-primary { + font-family: var(--font-philosopher), serif; +} +