WordPress Entwickler für Programmierung Ihrer Webprojekte
WordPress Entwickler für Programmierung Ihrer Webprojekte
  • Start
  • Unser Angebot
  • Blog
  • Kontakt
Avatar (Thumbnail) zum Blogeintrag

Wie binde ich Schriftarten am besten ein?

Bloggerin: zauni | 14. Januar 2024

dsgvo Schriftart

Schriftarten als Wiedererkennungswert

Um eine Webseite interessant und ansprechend zu gestalten, verwenden wir bestimmte Schriftarten.

Diese sollen sich so gut es geht in die übrigen Gestaltung der Seite integrieren und somit abgestimmt auf das Layout, das Logo und aller übrigen Elemente sein. Dabei wird auch sichergestellt, dass bestimmte Merkmale eines Unternehmens beibehalten werden. Vor dem leidigen Thema der DSGVO gab es dabei kaum jemanden, der nicht sofort auf den Google Dienst verwiesen hat. Doch wie sieht die Lage heute aus und was muss ich beachten, wenn ich eine Font selber in die Seite einbinde?

 

Hier wurde offensichtlich die falsche und unleserliche Schriftart verwendet :)

    Inhalt auf dieser Seite:

  1. Schriftarten als Wiedererkennungswert
  2. Google Fonts & DSGVO
  3. Schriftarten selber einbinden
  4. Beachte!
  5. Größenunterschiede der Formate
  6. Richtiges Einbinden

Google Fonts & DSGVO

Mittlerweile sollte jedoch klar sein, dass das Einbinden einer Schriftart über einen externen Dienst gegen die DSGVO verstößt.

Das bedeutet, wir benötigen die explizite Zustimmung der Besucher:innen, bevor wir eine gewünschte Schriftart laden könnten. Das bedeutet, unsere Besucher:innen sehen unsere Website zuerst mit der falschen Schriftart. Erst wenn sie explizit der Verwendung externer Daten zustimmen, können wir unsere Schriftart nachladen. Und was machen wir, wenn der Verwendung externer Daten nicht zugestimmt wird?

Damit zerstören wir uns unseren Wiedererkennungswert und verlieren womöglich potentielle Interessenten.

Telefon+436603100000
E-Mailsouri@wp-entwickler.at
AdresseWP-Entwickler
Safenauer-Straße 62,
8230 Hartberg

Schriftarten selber einbinden

Somit bleibt uns nur der Weg, die Schriftart selber auszuliefern.

Hierbei werden keine zusätzlichen Verbindungen zu anderen Servern aufgebaut und auch sonst kann es schwer zu Problemen kommen. Wir sind ja nicht mehr auf externe Dienste angewiesen.

Beachte!

Beim Einbinden von Schriftarten über die eigene Seite gilt es ein paar Kleinigkeiten zu beachten.

Das wichtigste zuerst. Es gibt verschiedene Formate für Schriftarten.

  • „woff2“ für moderne Browser
  • „woff“ hauptsächlich für IE9-IE11
  • „ttf“ für ältere Safari, Android iOS
  • „svg“ für ältere iOS Geräte
  • „eot“ für IE6-IE8

Bei der Aufzählung erkennen wir aber bereits einen klaren Trend. Mittlerweile sollte es ausreichen, eine Schriftart im Format woff2 bereit zu stellen. Wenn ältere Internet Explorer Versionen unterstütz werden sollen, müssen wir woff mit ausliefern. Natürlich ist es kein Problem, alle Formate vorzuhalten. Jeder Browser verwendet automatisch die Schriftart, mit der er am besten umgehen kann.

Um eine bestimmte Schriftart lokal einzubinden, könnte man sich diese vorab z.B. bei Google (https://fonts.google.com/) selbst besorgen. Leider können wir so nur eine ttf-Datei herunterladen.

Das Bild zeigt die Seite der Schriftart "Roboto" auf https://fonts.google.com/specimen/Roboto. Markiert ist der Link zum Download der Schriftart.
Herunterladen einer Schriftart von Google-Fonts

Um die Schriftarten nicht selbst konvertieren zu müssen, möchte ich hier auf ein GitHub-Repo verlinken, das bereits eine breite Auswahl in verschiedenen Formaten bereit hält.

Unter https://github.com/KriesiMedia/enfold-library/tree/master/miscellaneous/local-google-fonts/font-sources können wir aus einer breiten Masse an freien Gfonts eine für uns brauchbare auswählen.

Größenunterschiede der Formate

Die Auswahl des Formats hat teilweise große Auswirkungen auf die Performance unserer Seite.

Eine Schriftart im Format ttf benötigt dabei je nach Komprimierung gerne mal doppelt so viel Speicherplatz. Unsere Besucher:innen müssen daher auch deutlich mehr Daten herunterladen.

Zum Vergleich sehen wir hier einmal die selben Schriftarten vom Google-Server, die als woff2 geladen werden:

Das Bild zeigt die Größe von 3 Schriftarten als woff2. Markiert sind die Größen, die alle um die 19KB gzipped betragen.
Knapp 19KB pro Schriftart für woff2

Und hier lokal eingebundene ttf Fonts.

Das Bild zeigt die Größen von 3 Schriftarten. Eingebunden als ttf. Markiert sind die Größen, die zwischen 111KB und über 255KB liegen.
Höhere Schwankung und Größen bei den Schriftarten im ttf-Format

Man beachte die Größenunterschiede von ca. 18 KB für woff2 gegenüber den über 250 KB für ttf!

Richtiges Einbinden

Damit uns der Web Browser die Wahl der richtigen Font-Formate übernimmt, müssen wir die Schriftarten in unserem Stylesheet korrekt eintragen.

Hier ein Beispiel für die Schriftart „Cabin“:

Das Bild zeigt exemplarisch eine Einbindung einer Schriftart mit unterschiedlichen Formaten. Zu sehen ist die Einbindung der Formate EOT, TTF, WOFF, WOFF2 und SVG
Die Einbindung einer Schriftart mit unterschiedlichen Formaten.

Quellen:

  • https://css-tricks.com/snippets/css/using-font-face/
  • https://kriesi.at/support/topic/german-dsgvo-deutschland-datenschutz-google-fonts-google-maps-youtube/#post-926490
  • https://fonts.google.com/
  • https://github.com/google/fonts/issues/1495

Navigation

Start Unser Angebot Blog

Impressum & Kontakt

wp-entwickler.at wird betrieben von

  • wp-entwickler Rene Souri
  • UID: ATU60950509
  • Safenauer-Straße 62
  • 8230 Hartberg

Wir lieben WordPress und freuen uns, mit Ihnen ein Projekt entwickeln zu können!

  • Impressum
  • AGB

wp-entwickler.at ist eine indit.at Division