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-weight | Designation | Font style |
---|---|---|
100 | Thin | Ultra light |
200 | Extra Light | Extra light |
300 | Light | Light |
400 | Normal | Normal |
500 | Medium | Light half fat |
600 | Semi Bold | Semi-fat |
700 | Bold | Fat |
800 | Extra Bold | Extra fat |
900 | Ultra Bold | Ultrafat |
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.