Fonts

Swift Rust ships with 2,071 Google fonts and supports self-hosted local fonts (OTF, TTF, WOFF, WOFF2). Font handling is automatic: the framework generates @font-face rules, preloads critical fonts, and applies size-adjust fallbacks to prevent layout shift.

Google fonts

Import a font from swift-rust/font/google and call it as a function:

app/layout.tsx

import { Inter, JetBrains_Mono } from "swift-rust/font/google";

const inter = Inter({ subsets: ["latin"], display: "swap" });
const mono = JetBrains_Mono({ subsets: ["latin"], display: "swap" });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${inter.variable} ${mono.variable}`}>
      <body>{children}</body>
    </html>
  );
}

Browse all 2,071 fonts

See the live font preview to browse every font with sample text.

Local fonts

Self-hosted fonts use localFont. Your font file lives in your project, so you define it once in a shared module and then import it by name anywhere — just like a Google font. The framework serves it at /_swift-rust/fonts/<path> in dev.

app/fonts.ts

import { localFont } from "swift-rust/font/local";

export const myFont = localFont({
  src: "./fonts/MyFont.woff2",
  weight: "400 700",
  display: "swap",
});

Then import it by name wherever you need it:

app/layout.tsx

import { myFont } from "./fonts";

<body className={myFont.className}>{children}</body>

Prefer a ready-made face? The package also ships named local fonts you can import directly, exactly like Google fonts:

app/layout.tsx

import { Lausanne, VarentGrotesk } from "swift-rust/font/local";

const display = VarentGrotesk({ display: "swap" });

Using a font

Once loaded, apply the font via the className, the style prop, or the CSS variable.

usage

<h1 className={inter.className}>Hello</h1>
<p style={inter.style}>Hello</p>
<div style={{ fontFamily: 'var(--font-inter)' }}>Hello</div>

Next steps

Continue to Images.