How to use @import in CSS snippets?

Custom CSS & Theme Design
1

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.

2

You have to convert the font to a base64 and include it into the snippet.

1 Like
3

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:

1 Like
4

Thanks for the replies!