Wie man in Breakdance Schriften lokal einbindet

Tutorials, Tipps

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-weightBezeichnungSchriftschnitt
100ThinUltra leicht
200Extra LightExtra leicht 
300LightLeicht
400NormaleNormal
500MediumLeichthalbfett
600Semi BoldHalbfett
700BoldFett
800Extra BoldExtrafett
900Ultra BoldUltrafett
Übersicht der Schriftschnitte und ihrer zugehörigen CSS Font-Weight

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.

Teilen
Jetzt kontaktieren

Lass uns deine Website fertigstellen.

Was wir dir garantieren

Du bekommst nur eine Rechnung, wenn wir helfen konnten!

Unser Team engagiert sich Tag für Tag, um für unsere Kunden Probleme schnell zu lösen, oder bei Umsetzungen optimale Ergebnisse zu erzielen. Das hat dazu geführt, dass bedemy heute für seine erstklassige Dienstleistung bekannt ist und viele glückliche Kunden hat. Unsere bisherige Erfahrung und die Überzeugung in unsere Fähigkeiten ermöglicht es uns, auch Neukunden ein einzigartiges Versprechen zu geben, das unsere Verpflichtung zur Kundenzufriedenheit unterstreicht.

Wir stellen nur eine Rechnung, wenn wir wirklich helfen konnten!

Sollten wir bei einem Problem, oder bei einer Umsetzung nicht helfen können, stellen wir auch keine Rechnung. Selbst wenn wir bereist Zeit investiert haben. Du hast kein Risiko, denn selbst die Kosten für den Fall, dass wir alles umgesetzt haben wie gewünscht, sind unsere Kosten transparent, vorher ausgemacht und niemals über dem geplanten Budget!

Was unsere Hilfe kostet

Keine bösen Überraschungen

Wir rechnen nach einem festen Stundensatz ab, den wir dir vor einem kostenpflichtigen Einsatz unseres Teams in einem schriftlichen Angebot mitteilen. Das bedeutet: Die Umsetzung eines kleinen Features, oder das Beheben eines Problems geht in der Regel schnell (oft innerhalb einiger Minuten) und kostet somit auch nicht viel. Die Umsetzung einer kompletten Seite dagegen nimmt schon mal (je nach Umfang) ein paar Tage in Anspruch.

Was die Kosten angeht, musst du dir aber keinen Kopf machen.

Zum einen bekommst du von uns vorab immer via E-Mail ein Angebot, selbst bei kleineren Support-Anfragen. Zum anderen halten wir uns auch immer an diese Kostenschätzung, wenn wir dir nichts anderes mitteilen. Sollten wir bei der Umsetzung merken, dass die an uns gestellte Aufgabe doch komplexer ist und länger dauert, melden wir uns bei dir mit einer überarbeiteten Kostenschätzung. Dann kannst du entscheiden, ob du bereit bist dieses überarbeitete Angebot anzunehmen, oder nicht. Sollte dir das zu viel sein, stoppen wir das Projekt und du zahlst keinen Cent. Auch nicht für die Arbeit, die wir bis dahin (entsprechend der ersten Einschätzung) schon in das Projekt investiert haben.