Fruktur
Type with Purpose
Good typography guides attention, improves understanding, and makes communication effortless.
The Anatomy of a Typeface
By FontSide · June 2026
Every typeface is a system of decisions — about stroke contrast, x-height, spacing, and rhythm. The best ones feel invisible: you stop seeing the letters and start hearing the voice behind them. That transparency is the hardest thing to design.
A high x-height opens up the counters and makes small text breathe. Tight tracking pulls a headline together; loose tracking gives a caption room to exhale. None of these choices are accidents — they are arguments about how reading should feel.
Uppercase
Lowercase
Numerals
Symbols
Configuration
Select the weights and styles you want to include in your project.
Styles
Package Manager
The recommended way to use fonts in modern web projects.
1. Install Package
pnpm add @fontsource/fruktur 2. Import in App
// Please select at least one weight and style 3. CSS Usage
body {
font-family: "Fruktur", system-ui;
} Google Fonts CDN
Use Google's CDN to embed the fonts directly via HTML.
HTML <head>
<!-- Please select at least one weight and style --> Fontsource CDN
Skip the build step by adding this directly to your global CSS file.
Global CSS
/* Please select at least one weight and style */ Background & Story
Fruktur initially appears to be a playful and powerful black letter type with a warm friendly feeling. However its construction is closer to that of an upright italic. Fruktur offers some of the feeling of a black letter but with higher legibility and greater utility than is typical of black letter type. Fruktur will be most useful from medium to large sizes.
To contribute to the project, visit github.com/EbenSorkin/Fruktur
Updated:
January 2016, to v1.004 with additional language support, improved hinting (visible in Windows browsers at smaller font sizes) and other minor fixes.
August 2022, expanded glyph set, better language support. Italic style has been added to complement Roman.
Tags & Moods
Subsets
Install
pnpm add @fontsource/fruktur Designed by
Viktoriya Grabowska, Eben Sorkin
Links
License
OFL-1.1