swift·rust
Typography

Every font, every weight,
live in your browser.

2,071 Google fonts and 8 local font families, all available as on-demand imports. Pick a font, see it in action, and copy the import statement into your project.

2,071
Google fonts
8
Local families
27+
Zimula weights
auto
Subsetting

Live preview

Type a name to load any of the 2,071 Google fonts.
Typography studio
Geist · 600 · roman
Style
96px
-3
1.10
Beautiful type
Sample
import { Geist } from "swift-rust/font/google";

Featured Google fonts

25 of 2,071 — every one ships the same way.

These are the fonts most teams reach for. Use the search above to preview any of the remaining 2,046.

Sans-serif

Geist

Default UI sans, by Vercel
Beautiful type
import { Geist } from "swift-rust/font/google"

Inter

Designed for screens
Beautiful type
import { Inter } from "swift-rust/font/google"

Roboto

Modern, friendly, versatile
Beautiful type
import { Roboto } from "swift-rust/font/google"

Poppins

Geometric, warm heart
Beautiful type
import { Poppins } from "swift-rust/font/google"

Manrope

Clean for editorial
Beautiful type
import { Manrope } from "swift-rust/font/google"

IBM Plex Sans

Corporate with character
Beautiful type
import { IbmPlexSans } from "swift-rust/font/google"

Space Grotesk

Quirky display
Beautiful type
import { SpaceGrotesk } from "swift-rust/font/google"

Plus Jakarta Sans

Elegant, modern
Beautiful type
import { PlusJakartaSans } from "swift-rust/font/google"

Outfit

Geometric branding
Beautiful type
import { Outfit } from "swift-rust/font/google"

Figtree

Friendly, approachable
Beautiful type
import { Figtree } from "swift-rust/font/google"

Sora

Made for UI
Beautiful type
import { Sora } from "swift-rust/font/google"

DM Sans

Low-contrast geometric
Beautiful type
import { DmSans } from "swift-rust/font/google"

Serif

Playfair Display

Editorial elegance
Beautiful type
import { PlayfairDisplay } from "swift-rust/font/google"

Lora

Balanced for the screen
Beautiful type
import { Lora } from "swift-rust/font/google"

DM Serif Display

Editorial display
Beautiful type
import { DmSerifDisplay } from "swift-rust/font/google"

IBM Plex Serif

Corporate serif
Beautiful type
import { IbmPlexSerif } from "swift-rust/font/google"

Monospace

Geist Mono

Default monospace, by Vercel
Beautiful type
import { GeistMono } from "swift-rust/font/google"

JetBrains Mono

Code editor default
Beautiful type
import { JetbrainsMono } from "swift-rust/font/google"

Fira Code

Monospace ligatures
Beautiful type
import { FiraCode } from "swift-rust/font/google"

Source Code Pro

Adobe monospace
Beautiful type
import { SourceCodePro } from "swift-rust/font/google"

IBM Plex Mono

Corporate mono
Beautiful type
import { IbmPlexMono } from "swift-rust/font/google"

Display & script

Bricolage Grotesque

Bold contemporary
Beautiful type
import { BricolageGrotesque } from "swift-rust/font/google"

Bebas Neue

All-caps display
Beautiful type
import { BebasNeue } from "swift-rust/font/google"

Cinzel

Roman capitals
Beautiful type
import { Cinzel } from "swift-rust/font/google"

Caveat

Casual handwriting
Beautiful type
import { Caveat } from "swift-rust/font/google"

Local fonts

8 families bundled in the framework.

Bundled in packages/font/src/local/ and served from /_swift-rust/fonts/. Use them when you need exact control over weights or want to avoid a network round-trip.

Lausanne

400
Aa Bb Cc 123

A precise editorial display

import { Lausanne } from "swift-rust/font"

DxSlight

500, 800 italic
Aa Bb Cc 123

Decorative medium + ultra

import { DxSlight } from "swift-rust/font"

DxSlight Medium Ultra

500
Aa Bb Cc 123

Decorative medium

import { DxSlightMediumUltra } from "swift-rust/font"

DxSlight ExtBd UltraSlant

800 italic
Aa Bb Cc 123

Heavy display slant

import { DxSlightExtBdUltraSlant } from "swift-rust/font"

Varent Grotesk

700, 200 italic
Aa Bb Cc 123

Modern grotesk

import { VarentGrotesk } from "swift-rust/font"

Varent Grotesk Bold

700
Aa Bb Cc 123

Bold variant

import { VarentGroteskBold } from "swift-rust/font"

Varent Grotesk ExtLtIta

200 italic
Aa Bb Cc 123

Extra-light italic

import { VarentGroteskExtLtIta } from "swift-rust/font"

Zimula

Full weight ladder 100–900 in three styles (normal, ink-trap, ink-spot)

27 weights
100 ThinThe quick brown fox jumps
200 ExtraLightThe quick brown fox jumps
300 LightThe quick brown fox jumps
400 RegularThe quick brown fox jumps
500 MediumThe quick brown fox jumps
600 SemiBoldThe quick brown fox jumps
700 BoldThe quick brown fox jumps
800 ExtraBoldThe quick brown fox jumps
900 BlackThe quick brown fox jumps
import { Zimula } from "swift-rust/font"

How to use

Three patterns cover almost every case. Drop them into your app/layout.tsx and you're shipping.

app/layout.tsxGoogle fonts · one import, one variable, the whole tree gets it
import { Geist, GeistMono } from "swift-rust/font/google";

const geist = Geist({ subsets: ["latin"], display: "swap", variable: true });
const geistMono = GeistMono({ subsets: ["latin"], display: "swap", variable: true });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html className={`${geist.variable} ${geistMono.variable}`}>
      <body className={geist.className}>{children}</body>
    </html>
  );
}
app/fonts.tsLocal fonts · point at a file, get a CSS class back
import { localFont } from "swift-rust/font/local";

const heading = localFont({
  src: "./fonts/Heading-Bold.woff2",
  weight: "700",
  display: "swap",
  variable: true,
});

export { heading };
app/layout.tsxLocal font CSS · inject @font-face declarations from the framework
import { localFontCss, Lausanne } from "swift-rust/font";
import { Lausanne as LausanneFont } from "swift-rust/font";

const css = localFontCss();
const lausanne = Lausanne({ variable: true });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html className={lausanne.variable}>
      <head>
        <style dangerouslySetInnerHTML={{ __html: css }} />
      </head>
      <body>{children}</body>
    </html>
  );
}