Spaces:
Sleeping
A newer version of the Gradio SDK is available:
5.0.1
Learn how to include assets, such as fonts and images, in your theme.
Loading remote content For Obsidian to work offline and to preserve user privacy, themes [[Developer policies|aren't allowed]] to load remote content over the network. For more information, refer to [[Theme guidelines#Keep resources local]]
Use data URLs
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 to the url() function.
To create a data URL for your assets, create a URL using the following format:
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. - Replace
<BASE64_DATA>with the Base64 encoded representation of your asset.
The following example embeds a GIF file as a background image:
h1 {
background-image: url("data:image/gif;base64,R0lGODdhAQADAPABAP////8AACwAAAAAAQADAAACAgxQADs=")
}
Encode your assets
For instructions on how to encode an asset into base64, refer to Encoding data into base64 format.
You can also use one of the many free online tools for encoding.
For fonts:
For images:
- WebSemantics converts JPEG, JPG, GIF, PNG, SVG
- Base64 Guru supports a wide variety of image formats
- Yoksel URL-encoder for SVG optimized for SVG files
Consider file size
Embedding assets increases the file size of your theme, which may lead to poor performance in the following situations: