Web Fonts

Adding a beautiful typeface to your design is one of the best ways to make it look more polished and premium. With Bootstrap Studio, you have the option to choose among thousands of free fonts, courtesy of the Google Fonts library. You also have the option to add your own completely custom fonts.

Google Fonts

Adding a web font from Google Fonts is super quick. To start, right click the Fonts group in the Design panel and choose the Manage Fonts option.

This will bring up the Google Fonts browser.

Here you can search for font families, filter by category and supported language, and activate the styles that you need.

TIP

You can change the "quick brown fox" text by clicking and typing.

After you Save your selection, when styling elements on the page the new fonts will be available in the Font Family input.

Remember to always include a fallback font after your web font, in case the latter fails to load or isn't supported by legacy web browsers.

Custom Fonts

Sometimes you need to use a custom font that is not available in Google Fonts. In this case, you can import your font directly in the app.

Converting Your Font to a Web Font

Only webfonts can be imported in Bootstrap Studio. But thanks to free online services like Transfonter (opens new window), 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 Web Font

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.