Skip to main content

​
Overview

The typography system uses two custom font families: Host Grotesk for body text and ServerMono for monospaced content. Both fonts implement progressive loading with font-display: swap for optimal performance.

​
Font Families

​
Host Grotesk

Host Grotesk is the primary typeface used throughout the site. It’s self-hosted with three variants:

Regular

Normal weight for body text

Medium

Emphasis and headings

Medium Italic

Italic emphasis

​
ServerMono

ServerMono is loaded from the internet-development CDN for monospaced content. Available in:
  • Regular - Standard monospace text
  • Regular Oblique - Slanted monospace style

​
Font Loading Strategy

​
Font Display Swap

All fonts use font-display: swap to ensure text remains visible during font loading:
font-display: swap shows fallback fonts immediately while custom fonts load in the background, preventing invisible text (FOIT) and improving perceived performance.

​
Progressive Enhancement

ServerMono implements a progressive format cascade:
  1. WOFF2 - Best compression for modern browsers
  2. WOFF - Good compression with wider support
  3. OpenType - Universal fallback

​
Font Face Declarations

Here are the actual @font-face declarations from styles.css:

​
Host Grotesk Regular

styles.css
@font-face {
  font-family: 'Host Grotesk';
  src: url('/fonts/HostGrotesk-Regular.woff') format('woff'),
       url('/fonts/HostGrotesk-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

​
Host Grotesk Medium

styles.css
@font-face {
  font-family: 'Host Grotesk';
  src: url('/fonts/HostGrotesk-Medium.woff') format('woff'),
       url('/fonts/HostGrotesk-Medium.woff2') format('woff2');
  font-style: normal;
  font-weight: medium;
  font-display: swap;
}

​
Host Grotesk Medium Italic

styles.css
@font-face {
  font-family: 'Host Grotesk';
  src: url('/fonts/HostGrotesk-MediumItalic.woff') format('woff'),
       url('/fonts/HostGrotesk-MediumItalic.woff2') format('woff2');
  font-style: italic;
  font-weight: medium;
  font-display: swap;
}

​
ServerMono Regular

styles.css
@font-face {
  font-family: 'ServerMono';
  src: url('https://cdn.jsdelivr.net/gh/internet-development/www-server-mono@latest/public/fonts/ServerMono-Regular.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/internet-development/www-server-mono@latest/public/fonts/ServerMono-Regular.woff') format('woff'),
       url('https://cdn.jsdelivr.net/gh/internet-development/www-server-mono@latest/public/fonts/ServerMono-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

​
ServerMono Regular Oblique

styles.css
@font-face {
  font-family: 'ServerMono';
  src: url('https://cdn.jsdelivr.net/gh/internet-development/www-server-mono@latest/public/fonts/ServerMono-RegularOblique.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/internet-development/www-server-mono@latest/public/fonts/ServerMono-RegularOblique.woff') format('woff'),
       url('https://cdn.jsdelivr.net/gh/internet-development/www-server-mono@latest/public/fonts/ServerMono-RegularOblique.otf') format('opentype');
  font-weight: normal;
  font-style: oblique;
  font-display: swap;
}

​
Fallback Stack

The site uses a comprehensive system font fallback stack:
styles.css
font-family: 'Host Grotesk', -apple-system, BlinkMacSystemFont, avenir next, avenir, 
             segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, 
             noto, helvetica, arial, sans-serif;
This fallback stack ensures readable text on all platforms while fonts load, with platform-specific optimizations for macOS, Windows, and Linux.

​
Typography Settings

PropertyValueUsage
Base font size20pxBody text
Font weight400Default text weight
Font familyHost GroteskPrimary typeface
Line heightDefaultNatural spacing

​
Font Files

Host Grotesk fonts are self-hosted in /fonts/:
  • HostGrotesk-Regular.woff
  • HostGrotesk-Regular.woff2
  • HostGrotesk-Medium.woff
  • HostGrotesk-Medium.woff2
  • HostGrotesk-MediumItalic.woff
  • HostGrotesk-MediumItalic.woff2
WOFF2 format provides approximately 30% better compression than WOFF, making it the preferred format for modern browsers.

Build docs developers (and LLMs) love

Get started for freeTalk to us