Custom Fonts in Bootstrap Studio

Bootstrap Studio offers hundreds of fonts thanks to the built-in Google Fonts integration. But sometimes you need to use a custom font that is not available there. In this case, you can import your font directly in the app.

Converting Your Font to a Webfont

Only webfonts can be imported in Bootstrap Studio. But thanks to free online tools like Transfonter, you can convert any regular font format to a webfont. Just Add your font files and click Convert. This will give you a zip file with your webfont.

Note: Make sure that the license terms of the font you're converting permit using it on the web. In some cases, commercial fonts require a separate license for such use.

Importing your Webfont

After you extract the zip file you generated above (or if you already have a webfont), right click the Fonts group in Bootstrap Studio and choose Import Webfont. In the file browser, navigate to the webfont and select the css file in the folder.

The CSS file of a webfont contains important meta data that describes the available weights and charsets of your font, which Bootstrap Studio uses to import your font correctly.

Displaying the Font

All that remains is to set the font you imported as a font-family of an element on your page, by writing a bit of CSS. In the example below we've set the webfont to be used on the entire document, but you can easily limit this only to specific elements like headings.

Now you have a fully functional custom font in Bootstrap Studio! When you export your design, the font will be added as an asset, and when publishing your site everything will work seamlessly.