Webfont-Anbieter ermöglichen es, Webfonts auf einfache und bequeme Weise in eine Website zu integrieren. Der große Vorteil ist, dass ihr die Schriften nicht kaufen, oder euch um das Lizenzmodell Gedanken machen müsst. Mittlerweile gibt es einige kostenfreie Anbieter für Open-Source-Schriften wie Google Fonts oder Adobe Edge Web Fonts. Wer auf der Suche nach hochwertigen Font-Klassikern ist, findet bei einem kommerziellen Anbieter wie Typekit den passenden Webfont. In diesem Beitrag zeigen wir euch, wie ihr die Web-Dienste nutzen und die Schriften auf eurer Website einbinden könnt.

Die Vorteile von Webfont-Anbietern

Wenn ihr selbst einen Webfont erstellt, müsst ihr euch darum kümmern, dass das Lizenzmodell der Ausgangsschrift auch die Generierung des Webfonts erlaubt. Wenn ihr die Schriften von Webfont-Anbietern verwendet, müsst ihr euch um das Lizenzmodell keine Gedanken mehr machen. Ihr erhaltet auch nicht die Schrift-Dateien selbst, sondern baut lediglich wenige Codezeilen in eurer Website ein um die Schrift einzubinden. Ein weitere Vorteil dieser Webdienste ist, dass ihr die unterschiedlichen Webformate wie TTF, WOFF und EOT für die unterschiedlichen Browser nicht berücksichtigen müsst. Auch das übernimmt der Webfont-Anbieter für euch, der in dem Moment des Seitenaufrufs das passende Dateiformat für den jeweils verwendeten Browser ausliefert.

Kostenlose Webfonts von Adobe und Google

Bei Webfont-Anbietern wie Google Fonts und Adobe Edge Web Fonts findet ihr eine große Auswahl an Open-Source-Schriften. Einige Schriften findet ihr bei beiden Anbietern.

Die Adobe Edge Webfonts bieten im Gegensatz zu Google eine verfeinerte Suche an (z. B. nach Laufweite, x-Höhe oder Kapitälchen) und der Dienst ist mit Typekit verknüpft. Bei den Google Fonts könnt ihr im Gegensatz zu den Adobe Edge Web Fonts die Schrift auch als Desktop-Font herunterladen, um ihn in euren Entwürfen zu benutzen. Bei Adobe funktioniert das nur im Rahmen der Creative Cloud über Typekit.

Schriftklassiker bei Typekit

Wer auf Font-Klassiker wie die der FontFont-Schriftbibliothek zurückgreifen möchte, der ist bei Typekit gut aufgehoben. Hier finden sich gestalterisch und technisch hochwertige Webfonts, die ihr im Abonnement nutzen könnt. Der Abo-Preis richtet sich nach der Anzahl der Pageviews (Seitenabrufe) und nicht nach der Nutzung des Fonts auf mehreren Websites.

Google Webfont einbinden

An einem Beispiel zeigen wir euch, wir ihr sehr einfach einen Webfont über die Google Fonts einbinden könnt. Wenn ihr eine passende Schrift gefunden habt, bekommt ihr mit einem Klick auf »Quick-Use« die Code-Zeilen, die ihr im <head> der Website und im CSS-Dokument einfügen müsst. Dabei habt ihr die Wahl zwischen einem CSS- und einem JavaScript-Snippet. Die Variante über @import ist nicht zu empfehlen.

Google Webfonts lassen sich leicht auf der Website intergrieren
Google Webfonts lassen sich leicht auf der Website integrieren
Google Fonts liefert den notwendigen Code
Google Fonts liefert den notwendigen Code

Link in HTML einfügen und CSS anpassen

Im <head> eurer Website fügt ihr nun den Link zu Google Fonts und der ausgewählten Schrift ein. In unserem Beispiel haben wir die CSS-Variante gewählt. Das sieht dann so aus:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;  charset=UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com /css?family=Petit+Formal+Script' rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>

Mit font-family die Schrift zuweisen

Jetzt könnt ihr den Google Webfont auf ein HTML-Element anwenden. In unserem Beispiel weisen wir dem Element body mit font-family den ausgewählten Font Petit Formal Script zu:

body {
  font-family: 'Petit Formal Script', cursive;
  font-size: 60px;
}

Das Beispiel mit dem integrierten Google Webfont könnt ihr euch hier anschauen:

Beispiel anschauen

Adobe Edge Web Fonts einbinden

Webfonts können auch mithilfe von JavaScript auf der Website eingebunden werden. Adobe Edge Web Fonts bietet diese Methode gleich von vornherein an. Mit dem script-Element wird zur JavaScript-Datei auf dem Server des Anbieters referenziert. Die Einbindung des Webfonts funktioniert genauso einfach wie bei Google Fonts.

Mit Adobe Edge Web Fonts kinderleicht passende Schriften finden
Mit Adobe Edge Web Fonts findet ihr leicht die passende Schrift

Schriftenklassifikationen helfen bei der Suche

Nach dem Klick auf »Get started« gelangt ihr auf eine Unterseite, auf der ihr in der rechten Spalte nach verschiedenen Kriterien einen Font auswählen könnt (Schreib- oder Serifenschriften, Fonts für Überschriften oder Absätze etc.). Wir haben uns für eine Schreibschrift entschieden. Die Auswahl erfolgt über einen Klick auf den Schriftnamen.

Auswahl einer Schreibschrift bei Adobe Edge Web Fonts
Auswahl einer Schreibschrift bei Adobe Edge Web Fonts

 <script> Tag und CSS-Code zum Einbetten des Webfonts

Jetzt liefert Adobe Edge Web Fonts automatisch die Code-Zeile mit dem <script> Tag für das JavaScript, das ihr in den <head> eurer Website einfügt. Die passende Eigenschaft font-family für euer CSS-Dokument findet ihr darunter.

Adobe Edge Web Fonts benutzt JavaScript
Adobe Edge Web Fonts benutzt JavaScript
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title></title>
  <script src="//use.edgefonts.net/alex-brush.js"></script>
 </head>
 <body>
  <h1></h1>
 </body>
</html>

Mit font-family die Schrift zuweisen

Im CSS-Dokument wird der Webfont über die font-family dem gewünschten Element zugewiesen.

h1 {
  font-family: alex-brush, cursive;
  font-style: normal;
  font-weight: 400;
}

Hier seht ihr das Beispiel mit Adobe Edge Web Fonts:

Beispiel anschauen

Geschrieben von kulturbanause Team

Benutzerbild

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.

Feedback & Ergänzungen – 2 Kommentare

  1. Joachim Weber
    schrieb am 04.10.2022 um 16:51 Uhr:

    Dass das Einbinden von Google-Fonts bzw Adobe-Fonts datenschutzrechtlich nach dem Urteil des LG München vom 20.Januar2022 gegen die DSGVO verstößt wird aber auf dieser Seite nicht erwähnt.

    Ihr solltet zumindest darauf hinweisen, dass es aus Datenschutzgründen sinnvoller ist, diese Schriften lokal auf dem Webserver selber zu Hosten. Hilfen, dazu wie man dies bewerkstelligt, gibt es im Internet genug.

    Antworten
    • Jonas Hellwig
      schrieb am 07.10.2022 um 07:20 Uhr:

      Hallo Joachim, vollkommen korrekt. Der Artikel ist schon älter als die DSGVO. Wir planen ein Update dazu ein.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →