Wenn du beispielsweise Google Fonts von deren Server herunterlädst und in deine Website einfügst, greift Google auf die Daten deiner Website-Besucher zu. Das kann als Verstoß gegen die Datenschutz-Grundverordnung (DSGVO) betrachtet werden. Um Abmahnungen zu vermeiden, ist es sinnvoll die Schriften von Google oder anderen Anbietern lokal zu speichern und in die Website einzubinden.
Wie das geht, zeigen wir dir in diesem Tutorial!
1. Schriften herunterladen
Zunächst musst du die gewünschten Schriften herunterladen. In diesem Beispiel verwenden wir die Schrift „Inter“ aus der Sammlung von Google Fonts. Du kannst die Schrift entweder von der Google Fonts-Website herunterladen (https://fonts.google.com/) oder bei anderen Anbietern wie https://gwfh.mranftl.com/fonts (Google Webfonts Helper).
2. Das richtige Format
Da du in Breakdance nur Schriften im Format woff oder woff2 hochladen kannst, solltest du beim Download eines dieser beiden Formate wählen.
Unter Google Fonts ist diese Auswahl allerdings nicht möglich, daher musst du Schriften nach dem Download zunächst in das richtige Format konvertieren. Dafür eigenen sich kostenlose Anbieter wie https://cloudconvert.com/ttf-to-woff2
3. Preferences auswählen
Nachdem du deine Schriften heruntergeladen hast, klickst du in Breakdance auf die drei Punkte in der oberen Navigation neben dem „Save“ Button und wählst dann „Preferences“ aus.
4. Custom Fonts erstellen
Im Preferences-Fenster wählst du den Reiter „Custom Fonts“ und klickst dann auf „Add Font“.
5. Gib deiner Schrift einen Namen
Gib im Textfeld einen beliebigen Namen für deine Schrift ein. Hilfreich ist, wenn du der Schrift denselben Namen wie bei Google gibst, in unserem Fall also Inter. Klick dann auf „Add“.
6. Fonts hochladen
Klicke auf „Browse“, um die Schriften im woff2-Format (oder woff) hochzuladen, die du zuvor auf deinen Computer heruntergeladen hast. Lade alle gewünschten Schriftschnitte (regular, italic, bold, …) der Schrift hoch. Wähle dann für jeden Schriftschnitt und jede Größe (300, 400, 500, usw.) die entsprechende Schriftstärke aus (normal oder kursiv). Klicke abschließend auf „Save Fonts“.
Hier noch eine Übersicht falls du bei der Zuordnung der Schriftschnitte Hilfe brauchst:
| Font-weight | Bezeichnung | Schriftschnitt |
|---|---|---|
| 100 | Thin | Ultra leicht |
| 200 | Extra Light | Extra leicht |
| 300 | Light | Leicht |
| 400 | Normale | Normal |
| 500 | Medium | Leichthalbfett |
| 600 | Semi Bold | Halbfett |
| 700 | Bold | Fett |
| 800 | Extra Bold | Extrafett |
| 900 | Ultra Bold | Ultrafett |
Hinweis: Bei manchen Schriften, die mehrere Schriftschnitte enthält, kannst du nur eine Schrift-Datei herunterladen. Hier handelt es sich und eine variable Schrift (das erkennt man meist auch an der Bezeichnung der heruntergeladenen Datei). In diesem Fall reicht es, wenn du bei Breakdance nur diese Datei hochlädst. Du musst keinen Schriftstil zuordnen. Die Voreinstellung (regulär) reicht aus. Du hast dennoch alle Schriftschnitte der Schrift. Einfach mal testen!
7. Fertig! Du kannst deine lokale Schrift nutzen.
Deine gewünschte Schrift steht dir jetzt in Breakdance zur Verfügung. Überall wo du Schriften auswählen kannst, findest du sie unter dem hinterlegen Namen ganz oben in der Auswahl.
Beispiel: Geh zu den „Global Settings“, dann zu „Typography“. Hier kannst du deine lokal eingebundene Schrift (hier Inter) jetzt aus der Liste wählen.
Wichtiger Tipp
Wenn du ein Projekt mit Breakdance beginnst, speichere deine Schriften gleich zu Beginn lokal. Dann bist du auf der sicheren Seite und musst nachher nicht die ganze Website nach Schriften die du verwendest durchsuchen. Selbst wenn du im Projektverlauf eine weitere oder andere Schrift nutzen möchtest: Binde sie am besten immer sofort lokal ein.
