Package Lato font for Prometheus logo

Signed-off-by: Julius Volz <julius.volz@gmail.com>
2026-02-05 15:45:27 +01:00 · 2025-05-21 12:56:59 +02:00
parent 06be76efcb
commit b61864067d
2 changed files with 15 additions and 2 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,7 @@

 // import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+import { Lato } from "next/font/google";
 import {
  Anchor,
  AppShell,
@@ -33,6 +34,14 @@ const interFont = Inter({
  subsets: ["latin"],
 });

+const latoFont = Lato({
+  variable: "--font-lato",
+  preload: true,
+  subsets: ["latin"],
+  weight: "300",
+  display: "swap",
+});
+
 // export const metadata: Metadata = {
 //   title: "Create Next App",
 //   description: "Generated by create next app",
@@ -46,7 +55,11 @@ export default function RootLayout({
  const [burgerOpened, { toggle: toggleBurger }] = useDisclosure();

  return (
-    <html lang="en" {...mantineHtmlProps} className={interFont.variable}>
+    <html
+      lang="en"
+      {...mantineHtmlProps}
+      className={`${interFont.variable} ${latoFont.variable}`}
+    >
      <head>
        <ColorSchemeScript />
      </head>
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -109,7 +109,7 @@ export const Header = ({
                <Image src={prometheusLogo} height={32} alt="Prometheus logo" />
                <Text
                  fz={25}
-                  ff="Lato Light"
+                  ff="var(--font-lato)"
                  c="light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-0))"
                >
                  Prometheus