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 must always be at the top of your publish.css file */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
--font-text-theme: 'Poppins';
}
Obsidian Publish shares many CSS variables with the Obsidian app. You can change these variables on the body
element.
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 |
Publish-specific CSS variables should be defined on the .published-container
. See Build a Publish theme.
Variable | Description |
---|---|
--page-title-font |
Font family for page titles |