lecture.studio

Marp fonts: change the font family, use Google Fonts, embed

By Ekrem Çetinkaya · Published

Set the font in Marp with CSS on section: section { font-family: 'Source Sans 3', system-ui, sans-serif; } in the theme or the deck's style: block. A Google Font needs an @import url(…) line at the top of the theme; a local font needs @font-face. The PDF embeds whatever font the browser used, so a Google Font works when the exporting machine is online; a system font is the safe choice offline.

This guide covers the three ways to get a font in, what the built-in themes use, code and math fonts, export behaviour, and which faces read well from the back of a room.

The built-in fonts

default and uncover use system sans-serif stacks (the operating system's UI font, monospace from the system too); gaia imports Lato and Roboto Mono from Google Fonts, which is why gaia looks different offline: it falls back to the system font.

Set the family

Deck-wide, without a theme file:

---
marp: true
style: |
  section { font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif; }
  section h1, section h2, section h3 { font-family: 'Source Serif 4', Georgia, serif; }
  section code, section pre { font-family: 'JetBrains Mono', Menlo, monospace; }
---

Or the same rules in a theme file, once for the whole course. Always end the stack with a generic family so a missing font degrades to something sane.

Google Fonts

At the top of the theme (or the style: block), before any rule:

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&family=JetBrains+Mono&display=swap');

The weights you list are the ones you get; a bold heading with only 400 imported is a synthesised bold, which looks smeared on a projector. Import 400 and 700 at least. The theme builder writes this line for the fonts you pick.

A local or licensed font

For a font the institution licenses, or for offline export, put the file next to the theme and declare it:

@font-face {
  font-family: 'Uni Sans';
  src: url('./fonts/UniSans-Regular.woff2') format('woff2');
  font-weight: 400;
}
@font-face {
  font-family: 'Uni Sans';
  src: url('./fonts/UniSans-Bold.woff2') format('woff2');
  font-weight: 700;
}
section { font-family: 'Uni Sans', system-ui, sans-serif; }

Paths resolve relative to the theme file in marp-cli and VS Code. For the PDF export, marp-cli needs --allow-local-files to read the font file, exactly as for local images.

What the exports do

Export Google Font Local @font-face System font
HTML loaded by the viewer's browser (needs network) needs the font file next to the HTML viewer's system
PDF embedded, if the exporting machine was online embedded, with --allow-local-files embedded from the exporting machine
PPTX (default) rendered into the slide images same same

The PDF is the safe artefact: once exported, the font is inside it. The HTML export is only as good as the viewer's network and fonts.

Readable in a room

Sizes are the other half; see Marp font size.

FAQ

How do I change the font in Marp?

section { font-family: '…', system-ui, sans-serif; } in the theme or the deck's style: block, with separate rules for headings and code if you want them different.

How do I use Google Fonts in Marp?

An @import url('https://fonts.googleapis.com/css2?family=…') line at the top of the theme, then the family name in font-family. Import the weights you use.

Do fonts embed in the Marp PDF?

Yes: the PDF contains the font the exporting browser used, Google, local or system. Local font files need --allow-local-files in marp-cli.

Why does my Marp font look different offline?

The theme imports it from Google Fonts and the browser has no network, so it falls back to the next family in the stack. Use a local @font-face or a system font for offline decks.

More guides