kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Webfonts mithilfe eines Webfont-Anbieters einbinden

Webfont-Anbieter Google Fonts, Adobe Edge, Typekit

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.