docs/obsidian-developer/Reference/CSS variables/Publish/Site fonts.md

metadata

cssClass: reference

To load remote fonts we recommend using CSS with @import or defining your fonts with @font-face and an absolute URL. Learn more.

For example you can use Google Fonts in your publish.css file. Here's how you would use the font Poppins:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital@1&display=swap');

.published-container {
  --font-text-theme: 'Poppins';
}

CSS variables

Publish-specific variables should be defined on the .published-container.

Variable	Description
--font-text-size	Font size for page text
--font-text-theme	Font family for page text
--font-monospace-theme	Font family for code
--font-interface-theme	Font family for interface elements such as navigation
--font-mermaid	Font family for Mermaid diagrams
--page-title-font	Font family for [[Site pages|page titles]]