Use Custom Fonts with Breakdance Builder

Published by Justin on August 11, 2022
Last Updated: September 19, 2022 | Reading Time: 4 minutes

Fonts are an essential part of any website's design. They help to create a unique visual identity and can be used to convey a certain tone or style. Custom fonts can also be a great way to add personality to your site and make it stand out from the competition.

While Breakdance comes ready with hundreds of fonts to choose from, you may want to use a custom font that is not included in the default library. Fortunately, it's easy to add new fonts to your site. In this article, we'll show you how to add custom fonts to your Breakdance Builder website.

What is a Custom Font?

A custom font is a typeface that is not included in the default set of fonts that come installed on your computer. Custom fonts can be purchased from commercial type foundries, or downloaded for free from websites such as Google Fonts.

Why Use Custom Fonts?

There are many reasons why you might want to use custom fonts on your website. Perhaps you want to create a unique and recognizable visual identity for your brand. Or maybe you're looking to add some personality to your site and make it stand out from the competition. Custom fonts can also be a great way to add emphasis to certain pieces of content, or make your site more readable.

What Are The Different Font Types?

There are four common font formats that you'll come across when working with custom fonts:

.woff - Web Open Font Format (WOFF) is a format developed by Mozilla in collaboration with Type Equipment Foundries. WOFF is supported by all major browsers and is the recommended format for use on the web. These files can be uploaded to Breakdance directly for seamless integration

.ttf - TrueType Fonts (TTF) are a format developed by Apple and Microsoft. TTF is supported by all major browsers but is not as widely used as WOFF.

.otf - OpenType Fonts (OTF) are a format developed by Adobe and Microsoft. OTF is supported by all major browsers but is not as widely used as WOFF.

.svg - Scalable Vector Graphics (SVG) is a format developed by the World Wide Web Consortium (W3C). SVG fonts are supported by all major browsers but have limited support for color and style properties.

Upload and Add a Custom Font to Breakdance Builder

Now that you know what a custom font is and why you might want to use one, let's take a look at how to add a custom font to your Breakdance Builder website.

There are two methods you can use to add custom fonts to your site: Upload the font files directly to Breakdance. This method is recommended for small sites with a limited number of fonts. The second method is to use fonts in external CSS files. This is a good option for larger sites with multiple fonts, or if you want to use fonts that are not available in the default Breakdance font library.

Uploading Font Files Directly to Breakdance

To upload font files directly to your site, follow these steps:

1. In the Breakdance Builder visual editor, click the more options (...) at the top right of your display

2. From the drop-down menu, select "Preferences."

3. In the Preferences panel that appears, select the "Custom Fonts" tab.

4. Click the "Add Font" button, enter the name of your font, and then add the .woff or .woff2 font file.

5. Repeat this process for each font you want to add.

preferences in breakdance builder
upload custom font to breakdance builder wordpress

Uploading a Font to Breakdance using External CSS

If you're working with a large number of fonts, or if you want to use fonts that are not available in the default Breakdance font library, you can add them to your site using external CSS files. To do this, follow these steps:

1. In the Breakdance Builder visual editor, click the more options (...) at the top right of your display

2. From the drop-down menu, select "Preferences."

3. In the Preferences panel that appears, select the "Custom Fonts" tab.

4. Click the "Add CSS URL" button and paste the link to an external font. An example of a link looks like this:

🔤

fonts.googleapis.com/css?family=Open+Sans

add custom font css to breakdance builder wordpress
Displaying custom fonts in breakdance builder

Conclusion

Adding custom fonts to your website is a great way to create a unique and recognizable visual identity for your brand. There are several different ways you can add custom fonts to your site, and the method you choose will depend on the number of fonts you're working with and the browser support you need.

If you're working with a limited number of fonts, or you only need to support modern browsers, you can upload font files directly. For larger sites with multiple fonts, or if you need to support a wider range of browsers, you can add fonts using external CSS files. Whichever method you choose, custom fonts are a great way to improve the look and feel of your Breakdance site.

Written by Justin
Justin is the founder of Gold Penguin, a web design and marketing agency that helps businesses achieve their online goals. Justin has a passion for web design and marketing, and he loves working with clients to help them grow their businesses.

Comments

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Made with 💛 by Gold Penguin © 2022