Use Custom Fonts with Breakdance Builder

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.

Justin Gluska

Updated March 30, 2023

Reading Time: 5 minutes

Fonts are an essential part of any website's design. Fonts help craft a brands unique visual identity and are used to convey certain vibes. Aside from the UX/UI enhancements, fonts are generally just a great way to add personality to your site and make it stand out further from the competition.

While Breakdance comes pre-installed with hundreds of fonts to choose from, you may want to use a custom font that isn't included with its default library. Fortunately, it's pretty easy to add new fonts to your site. In this article, we'll show you how to add custom fonts to your WordPress website built with Breakdance Builder.

What is a Custom Font?

A custom font is a typeface that is not included in the default set of fonts that come installed (in this case – with Breakdance). Custom fonts can be purchased from commercial typing websites 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. Maybe you want to create a unique and recognizable visual identity for your brand. Or maybe you're looking to add a tad bit of personality. You could use a specific font to emphasize certain pieces of content or simply just to make a site more readable.

What Are The Different Font Types?

There are four common font formats that you'll come across when looking at 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 still 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 editor.

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, especially if you're using the font across your entire website. 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 on specific pages only.

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:

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.

Want to Learn Even More?

If you enjoyed this article, subscribe to our free newsletter where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.


Written by Justin Gluska

Justin is the founder of Gold Penguin, a business technology blog that helps people start, grow, and scale their business using AI. The world is changing and he believes it's best to make use of the new technology that is starting to change the world. If it can help you make more money or save you time, he'll write about it!

Subscribe
Notify of
guest

1 Comment
Most Voted
Newest Oldest
Inline Feedbacks
View all comments