{"id":233633,"date":"2022-01-05T10:30:00","date_gmt":"2022-01-05T08:30:00","guid":{"rendered":"https:\/\/devowl.io\/?p=233633"},"modified":"2025-05-02T15:55:25","modified_gmt":"2025-05-02T13:55:25","slug":"webfonts","status":"publish","type":"blog","link":"https:\/\/devowl.io\/de\/wordpress\/webfonts\/","title":{"rendered":"Google Fonts & Co. in WordPress: Alles Wichtige zu Webfonts!"},"content":{"rendered":"

Web fonts are now a dime a dozen. And that’s a good thing because they can transform bland websites into real eye candy and thus contribute significantly to an improved user experience.<\/p>\n

Doch wer die Wahl hat, hat die Qual: Es ist nicht immer einfach, die richtige Schrift im Web zu finden. Und als w\u00e4re das allein nicht m\u00fchsam genug, darf auch beim Thema Online-Schriftarten einbinden der Datenschutz keineswegs zu kurz kommen.<\/p>\n

But don’t despair, ask devowl.io! In this article, we show you where you can download beautiful fonts from the web and how you can integrate fonts in a GDPR-compliant manner.<\/p>\n<\/div><\/div>

\n<\/div><\/div>

Was sind Webfonts?<\/h2>\n

Was ist eine Webschrift? Kurz gesagt: Schriften f\u00fcr Webseiten. Online Schriftarten sind das Gegenst\u00fcck zu Desktop-Fonts<\/strong>, da sie nicht lokal auf einem Endger\u00e4t installiert sind, sondern von einem externen Webserver aus geladen werden.<\/p>\n

Vorteile von Webfonts<\/h3>\n

Web fonts are extremely practical because the fonts are directly integrated into the CSS of the website. Provided the visitor’s browser supports the font format – which is usually the case with standard browsers – the corresponding font is temporarily downloaded and displayed to your visitor when the website is called up. Thus, the same fonts are displayed for each visitor without having to be installed on the visitor’s computer.<\/p>\n

\u2705 Au\u00dfergew\u00f6hnliche Schriften<\/strong><\/p>\n

Vor dem Zeitalter der Webfonts, konnte nur auf vorinstallierte Systemfonts zur\u00fcckgegriffen werden.<\/p>\n

Wenn keine Webfonts geladen werden konnten oder auch heute nicht geladen werden k\u00f6nnen, werden stattdessen websichere Schriften (Web Safe Fonts)<\/strong> angezeigt. Solche Schriften sind bereits auf g\u00e4ngigen Betriebssystemen vorinstalliert, sodass sie ohne Probleme auf einem MacBook oder Windows-Laptop angezeigt werden k\u00f6nnen.<\/p>\n

Examples of web safe fonts are Arial, Times New Roman and Verdana – so only the cr\u00e8me de la cr\u00e8me of fonts \ud83d\ude09<\/p>\n

Im Gegensatz zu Systemschriftarten k\u00f6nnen Webdesigner dank der Einf\u00fchrung von Schriftarten im Internet auf Hingucker-Fonts zur\u00fcckgreifen und ihr Corporate Design somit unterst\u00fctzen.<\/p>\n

\u2705 Lizenzfreie Schriftarten<\/strong><\/p>\n

Viele Fonts-Anbieter wie 1001fonts, Google Fonts, Fontssquirrel und dafont stellen lizenzfreie Fonts zur Verf\u00fcgung. Diese darfst du in aller Regel kostenlos f\u00fcr deine Website nutzen.<\/p>\n

Aber lie\u00df dir in jedem Fall immer die Lizenzbedingungen der jeweiligen Schriftart durch, um auf der sicheren Seite zu sein! Es gibt n\u00e4mlich Schriftarten, die du nur f\u00fcr nicht-kommerzielle Zwecke kostenlos verwenden darfst. Genauso gibt es Lizenzvertr\u00e4ge f\u00fcr Schriftarten, die besagen, dass du die Schriftart auf deinem Desktop kostenlos verwenden kannst, nicht aber als Webfont.<\/p>\n

\u2705 Geringe Beeintr\u00e4chtigung der Suchmaschinenoptimierung<\/strong><\/p>\n

Webfonts sind nicht nur f\u00fcr Webdesigner ein Segen, sondern k\u00f6nnen die Suchmaschinenoptimierung auch weniger negativ beeinflussen. Vor der Einf\u00fchrung von Web-Schriftarten musste die Einbindung spezieller Schriftarten \u00fcber eine Grafik erfolgen.<\/p>\n

Problematisch hierbei war die Verlangsamung der Seitenladezeit durch gro\u00dfe Grafiken. Hinzu kam, dass einige Suchmaschinen (und Screenreader von sehbehinderten Menschen) den in der Grafik enthaltenen Text nicht lesen konnten. Daher wussten die Suchmaschinen nicht, worum es auf der Website ging und konnte die Website entsprechend nicht gut ranken.<\/p>\n

Aber Achtung!<\/strong> Auch Webfonts k\u00f6nnen Ladezeiten negativ beeinflussen, wenn zu viele davon eingebunden werden.<\/p>\n<\/div><\/div>

Nachteile von Webfonts<\/h2>\n

Although fonts are very important for websites and can have a positive impact on bounce rates, recognition and the length of time your visitors spend on your site, there are unfortunately – as with all too many things – disadvantages to using online fonts.<\/p>\n

\u274c Verschlechterte Ladezeit<\/strong><\/p>\n

Auch wenn Web-Schriften noch so sch\u00f6n sind, bringen sie dir nichts, wenn dadurch die Ladedauer deiner Website verlangsamt wird. Dadurch l\u00e4ufst du n\u00e4mlich Gefahr, die Absprungrate in die H\u00f6he zu treiben. Binde also nur so viele Webfonts (und Varianten davon) ein, wie du wirklich auf deiner Website verwendest!<\/p>\n

\u274c Urheberrechtsverletzungen<\/strong><\/p>\n

Just as with freely available stock images, you must also make absolutely sure that you are allowed to use online fonts. In the worst case, unlawful use – copyright infringement – can result in high costs.<\/p>\n

\u274c Kosten<\/strong><\/p>\n

Not all font providers make their fonts available free of charge – Adobe Fonts, for example. Some providers sell their fonts as part of subscription models, others in the form of one-off payments.<\/p>\n

\u274c (Fehlerfreie) Darstellung ist browserabh\u00e4ngig<\/strong><\/p>\n

Wie bereits erw\u00e4hnt, sind Webfonts zwar eine tolle Alternative zu Desktopfonts, allerdings setzt der Einsatz voraus, dass der vom Nutzer verwendete Browser die Darstellung der Font unterst\u00fctzt. Das ist bei modernen Browsern seit ca. 2008 immer gegeben \ud83d\ude09 (dieser Artikel entstand 2021). Ebenso kann das Aussehen der Schriftart auf verschiedenen Endger\u00e4ten und in verschiedenen Browsern variieren. Du solltest demnach unbedingt die gew\u00fcnschte Schriftart ausf\u00fchrlich testen.<\/p>\n

\u274c Probleme mit der Sprachkompatibilit\u00e4t<\/strong><\/p>\n

Bei einigen Webfonts besteht das Problem, dass diese nicht mit allen Sprachen kompatibel sind. So kann es dazu kommen, dass beispielsweise in der deutschen Sprache verwendete Umlaute wie \u00c4, \u00d6, \u00dc<\/em>, das \u00df<\/em> oder Sonderzeichen fehlen. Vor dem Einsatz einer Webfonts, sollte also immer gepr\u00fcft werden, ob sie alle f\u00fcr dich wichtigen Zeichen abdeckt.<\/p>\n

\u274c Probleme mit individuellen Anpassungen<\/strong><\/p>\n

Teilweise kann es auch vorkommen, dass Web-Schriftarten nicht in Varianten wie kursiv oder bold angeboten werden. Du kannst die Webfont auch nicht einfach selbst \u00e4ndern. Sollte es doch gelingen, so kann eine verzerrte Schriftart die Folge sein. Mache dir also bei der Auswahl der Fonts bereits Gedanken, welche Schrift-Variante und Schrift-Breite du ben\u00f6tigst.<\/p>\n<\/div><\/div>

Wo finde ich Webfonts?<\/h2>\n

Webfonts-Anbieter gibt es viele im Internet. Sie unterscheiden sich prim\u00e4r in Lizenzierung, Auswahl und Verwendung. Im Folgenden haben wir dir eine kleine Fonts-\u00dcbersicht \u00fcber verschiedene Anbieter erstellt, auf welche etwa Webdesigner zur\u00fcckgreifen k\u00f6nnen, um Schriftarten f\u00fcr eine Website auszusuchen.<\/p>\n

Freie Fonts:<\/strong> Die Verwendung dieser Fonts ist in den allermeisten F\u00e4llen kostenlos. Zudem k\u00f6nnen die Fonts auch kommerziell verwendet werden. Zu ihnen z\u00e4hlen:<\/p>\n