In order to use custom fonts with templates for website published via Obsidian Publish, you need to import the font.
> [!NOTE] Obsidian documentation ([URL](https://docs.obsidian.md/Themes/App+themes/Embed+fonts+and+images+in+your+theme))
> "To include assets such as fonts, icons, and images in your theme, you need to _embed_ them in the CSS file by passing a [data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) to the [url()](https://developer.mozilla.org/en-US/docs/Web/CSS/url) function."
To include assets such as fonts, icons, and images in your theme, you need to _embed_ them in the CSS file by passing a [data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) to the [url()](https://developer.mozilla.org/en-US/docs/Web/CSS/url) function.
To create a data URL for your assets, create a URL using the following format:
```css
url("data:<MIME_TYPE>;base64,<BASE64_DATA>")
```
- Replace `<MIME_TYPE>` with the MIME type for your asset. If you don't know it, refer to [Common MIME types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types).
- Replace `<BASE64_DATA>` with the [Base64](https://en.wikipedia.org/wiki/Base64) encoded representation of your asset.
The following example embeds a GIF file as a background image:
```css
h1 {
background-image: url("data:image/gif;base64,R0lGODdhAQADAPABAP////8AACwAAAAAAQADAAACAgxQADs=")
}
```
# Solutions that did not work
I tried this method, but it did not for me - [URL link](https://forum.obsidian.md/t/how-to-use-import-in-css-snippets/89117).
> As the title says, is there a way to use ` @import ` inside a CSS snippet?
> I’m trying to load a CSS file that contains definitions for a webfont using the `@import` statement but Obsidian tries to look for the file at the root of the app. The file is located in a subfolder in the snippets folder. I’ve tried both `folder/file.css`, `./folder/file.css`, and `/folder/file.css` but the result is the same. Also tried `vault/.obsidian/snippets/folder/`, adding `app://obsidian.md/` at the beginning and other variations with no success.
> I’ve thought about adding the file to the snippets root folder but it also contains `@font-face` with `src` pointing to the fonts in the same subfolder and I assume it wouldn’t be able to load them aswell.
> Is there any workaround or it is only possible by creating a plugin?
> Thanks.
> There’s one special allowance for @import: Google fonts. @import url("https://fonts.googleapis.com...") can be used, but otherwise the fonts need to be converted to base64 for use in snippets or themes, as AngelsOfDarkness mentioned. Some details here: There’s also a community plugin that may help in using custom fonts:
## Solutions that worked
The correct URL format that enable download of custom font assets were obtained from the ITS theme, in its' [encoded font snippets](https://github.com/SlRvb/Obsidian--ITS-Theme/blob/main/Snippets/S%20-%20Encoded%20Fonts.css)
I thought the clues must be in these files - because some fonts in the ITS theme would only work if these snippets were installed and turned on in the local obsidian. It turns out yes!
The code block looks like this:
```
/*Font: Norwestor*/
@font-face {
font-family: "Norwester";
src: url("data:font/woff2;charset=utf-8;base64,xxxxxxxXXXXXXXXX") format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
```
The fonts were embedded as base64 images, and they represent <BASE64_DATA>.
After copy and pasting all of the data urls for the fonts needed, then the Obsidian websites now render the titles correctly!
#date/2025/09/22