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.