How to embed fonts locally in Breakdance

Tutorials, Tips

Contents

For example, if you download Google fonts from their server and insert them into your website, Google accesses the data of your website visitors. This can be considered a violation of the General Data Protection Regulation (GDPR). To avoid warnings, it makes sense to save the fonts from Google or other providers locally and integrate them into your website.

We'll show you how to do this in this tutorial!

1. download fonts

First you need to download the desired fonts. In this example, we use the font "Inter" from the Google Fonts collection. You can either download the font from the Google Fonts website (https://fonts.google.com/) or from other providers such as https://gwfh.mranftl.com/fonts (Google Web Fonts Helper).

2. the right format

As you can only upload fonts in woff or woff2 format in Breakdance, you should choose one of these two formats when downloading.

However, this selection is not possible under Google Fonts, so you must first convert fonts to the correct format after downloading them. Free providers such as https://cloudconvert.com/ttf-to-woff2 are suitable for this

3. select preferences

After you have downloaded your fonts, click on the three dots in the top navigation next to the "Save" button and then select "Preferences" .

4. create custom fonts

In the Preferences window, select the tab "Custom Fonts" and then click on "Add Font".

5. give your font a name

Enter any name for your font in the text field. It is helpful if you give the font the same name as Google, in our case Inter. Then click on "Add".

6. upload fonts

Click on "Browse" to upload the fonts in woff2 format (or woff) that you have previously downloaded to your computer. Upload all desired font styles (regular, italic, bold, ...) of the font. Then select the appropriate font weight (normal or italic) for each font style and size (300, 400, 500, etc.). Finally, click on "Save Fonts".

Here is an overview if you need help assigning the font styles:

Font-weightDesignationFont style
100ThinUltra light
200Extra LightExtra light 
300LightLight
400NormalNormal
500MediumLight half fat
600Semi BoldSemi-fat
700BoldFat
800Extra BoldExtra fat
900Ultra BoldUltrafat
Overview of the font styles and their associated CSS font weight

Note: For some fonts that contain several font styles, you can only download one font file. This is a variable font (you can usually recognize this by the name of the downloaded file). In this case, it is sufficient if you only upload this file to Breakdance. You do not need to assign a font style. The default setting (regular) is sufficient. You still have all the font styles of the font. Just try it out!

7. done! You can use your local font.

Your desired font is now available in Breakdance. Wherever you can select fonts, you will find them under the stored name at the top of the selection.

Example: Go to the "Global Settings"then to "Typography". Here you can now select your locally integrated font (here Inter) from the list.

Important tip

If you start a project with Breakdance, save your fonts locally right at the beginning. Then you'll be on the safe side and won't have to search the entire website for the fonts you use. Even if you want to use an additional or different font during the course of the project: It is best to always integrate them locally immediately.

Share
Contact now

Let's finish your website.

What we guarantee

You will only receive an invoice if we have been able to help!

Our team works hard every day to solve problems quickly for our customers or to achieve optimal results during implementation. As a result, bedemy is now known for its first-class service and has many happy customers. Our past experience and belief in our abilities enables us to offer new customers a unique promise that underlines our commitment to customer satisfaction.

We only issue an invoice if we have really been able to help!

If we are unable to help with a problem or implementation, we will not issue an invoice. Even if we have already invested time. You have no risk, because even in the event that we have implemented everything as requested, our costs are transparent, agreed in advance and never exceed the planned budget!

What our help costs

No nasty surprises

We charge according to a fixed hourly rate, which we will inform you of in a written offer before we charge you for the use of our team. This means that implementing a small feature or fixing a problem is usually quick (often within a few minutes) and therefore doesn't cost much. The implementation of a complete site, on the other hand, can take a few days (depending on the scope).

But you don't have to worry about the costs.

Firstly, you will always receive a quote from us in advance via email, even for smaller support requests. Secondly, we always stick to this cost estimate unless we tell you otherwise. If, during implementation, we realize that the task assigned to us is more complex and will take longer, we will contact you with a revised cost estimate. You can then decide whether you are prepared to accept this revised offer or not. If it's too much for you, we'll stop the project and you won't pay a penny. Not even for the work we have already invested in the project up to that point (according to the initial estimate).