Font configuration

The .font^[docs] function overrides the global font configuration.

Font family parameters

A font family can be loaded from any of the following sources (case-sensitive):

• From file: path/to/font.ttf
• From URL: https://example.com/font.ttf
• From system fonts: Arial, Times New Roman
• From Google Fonts: GoogleFonts:Roboto, GoogleFonts:Noto Sans

The function can set custom font families via the following optional parameters:

• main: font family for all text content. Also applies to headings if the current theme does not specify a different font for them;

• heading: font family for headings (titles). Overrides main;

• code: font family for code blocks and code spans. Overrides main.

Example:

.font {fonts/Inter.ttf} heading:{GoogleFonts:Poppins} code:{Courier New}

Font resources are processed by the media storage system. This ensures that, for example, HTML output will include local fonts in the output directory for increased portability.

Note that system fonts, on the other hand, may not be installed on all devices. While this shouldn't affect PDF output, it can be problematic when sharing HTML output.

 

Other parameters

• size: base font size. Other elements, such as headings, will scale accordingly. For example 12px.

 

Fallbacks (multi-language documents)

Multiple .font calls create overlapped font configurations. Each font configuration will override the previous one, as long as it contains glyphs for the characters being rendered. Otherwise, the previous font configuration will be used as a fallback.

This is particularly useful for multi-language documents, such as documents containing both Latin and CJK (Chinese, Japanese, Korean) characters. For example, you may set a primary font for Latin characters and a fallback font for CJK characters:

.font {GoogleFonts:Ma Shan Zheng}
.font {GoogleFonts:Corinthia}