Skip to main content

​
The two paths

Both work. Pick bundled when the font isn’t on a public CDN, when licensing forbids a third-party host, or when the deck is for an offline screening. Pick CDN for everything else.

​
CDN fonts

The simplest path — one <link> tag, no file management, zero quota cost. The viewer’s CSP already whitelists https: for both stylesheets and font files, so any standard CDN works.
Works identically in single-file decks and folder decks. No CLI changes, no special configuration.

​
Bundled fonts (@font-face)

Folder mode only. Drop the font files into the deck (anywhere — no forced /fonts/ convention) and reference them with relative paths inside @font-face.

​
Folder layout

​
The CSS

​
The HTML

​
Upload

The CLI detects .woff2 as font/woff2 automatically. The static scan walks every url(...) in your CSS — including the ones inside @font-face — so a typo in the path surfaces as a pre-upload warning before the deck goes live.

​
Supported font formats

Slideless doesn’t maintain a font allowlist. The CLI assigns the correct Content-Type from the file extension; the viewer streams the bytes untouched. Ship .woff2 and stop. The other formats bloat the deck for no modern gain.

​
Multiple format fallback

If you genuinely need older-browser coverage:
The static scanner ignores the format() hints correctly — only the URLs count as references.

​
Pitfalls

  • Only ship .woff2 unless you need fallbacks. Every extra format doubles your font weight in the deck.
  • Set font-display: swap. Without it the browser shows invisible text until the font loads — looks broken on slow connections.
  • Parent-directory references are a hard error. src: url('../shared/fonts/MyFont.woff2') fails the pre-upload scan. Keep fonts inside the deck folder; decks must be self-contained.
  • Don’t mix CDN and bundled for the same family unless you’re deliberately handling licensing or fallbacks. The browser picks one source and ignores the rest; the quota cost of the bundled files is wasted.
  • CORS isn’t a concern. Slideless serves your bundled fonts from the same origin as the deck HTML inside the viewer’s iframe, so <link> and @font-face both work without any cross-origin headers. This is the whole point of the path-token URL model.
  • Licensing is on you. Slideless hosts what you upload — it doesn’t verify font licenses. Check the license before bundling a font; many commercial faces don’t permit self-hosting.

​
Fixing a broken font load

If a font doesn’t render after upload:
  1. Open DevTools → Network → Fonts. Check the file loaded with HTTP 200 and the right Content-Type.
  2. Check the path. Your CSS url('./fonts/X.woff2') must resolve to an actual file in the manifest. Run slideless share --strict to escalate missing-file warnings into a blocking error.
  3. Check font-family names match. The name in @font-face { font-family: 'Inter' } must match the name used in body { font-family: 'Inter' } — browsers silently fall back on a typo.
  4. Check the weight. If your CSS sets font-weight: 500 but you only bundled 400 and 700, the browser synthesizes a fake bold. Bundle the weights you actually use.

​
See also

  • Assets concept — how Content-Type detection, content-addressed storage, and manifests work.
  • Working with assets — the general folder model, .slidelessignore, static scan, Range requests.
  • Presentations — per-plan size caps.