Praxis Webdesign: Einbinden von Fonts

Heute möchten wir auf das Thema „Einbinden von Fonts“ eingehen. Was aber sind sogenannte Webfonts? Und wie funktionierts?

Webfonts sind Schriftarten, die ihr für eure Internetseite benutzen könnt und über einen Webserver den Besuchern eurer Internetseite zur Verfügung stellt. Dadurch werden die Schriften auch dann beim Aufruf eurer Internetseite richtig dargestellt, wenn der Internetbesucher die Schriftart gar nicht auf seinem eigenen PC installiert hat.

Es gibt verschiedene Anbieter für Webfonts, sowohl kostenlose als auch kostenpflichtige. Zum Beispiel stellt euch auch Google hierzu eine praktische Plattform zur Verfügung und zwar die sogenannten „Google Fonts“.

Link: https://www.google.com/fonts

Google hält dort mehr als 600 Schriftarten bereit, die ihr in eure Website integrieren könnt. Das Schöne daran: Es ist i.d.R. kostenfrei und auch noch sehr einfach, dies zu tun.

Wieso aber überhaupt Webfonts nutzen?

Stellt euch folgende Ausgangssituation vor: Ihr möchtet euch eine Website programmieren, das Grundlayout ist gefunden und nun geht es an die Auswahl der Schrift. Ihr merkt schnell, dass euch die Standartschriften wie Arial, Times New Roman oder Comic Sans einfach nicht richtig in eurem Webdesign gefallen. Was nun?

Ihr besucht vielleicht eine Website, die kostenlose Schriftarten zum Download anbietet, und ladet dort eine Schriftart herunter, die euch gut gefällt. Dann ist eure Website fertig programmiert und alles harmoniert super zusammen.

Doch nun zum eigentlichen Problem: Ein Freund oder Geschäftspartner schaut sich eure Internetseite auf seinem Rechner an und stellt dabei fest, dass bei ihm die Seite ganz anders aussieht. Wieso? Er hat die verwendete Schriftart, die in deiner Website eingebunden wurde, einfach nicht auf seinem Computer installiert. Dadurch kann es dann zu unschönen Formatierungen der Inhalte kommen. Und das will niemand gerne.

Die Lösung: das Einbinden der Schriften als Webfonts

Um solche Probleme auszuschließen, ist es sinnvoll Webfonts zu nutzen. Solange Standartschriftarten verwendet werden, ist dies unwichtig, da (fast) jeder Computer über diese Schriftarten verfügt. Wählt ihr aber eine individuelle Schriftart, die nicht auf jedem System installiert ist, solltet ihr auf Webfonts umsteigen. Wie einfach das geht, zeigen wir euch nun in wenigen Schritten am Beispiel von Google Fonts:

So bindet ihr Webfonts von Google in eurem Webdesign ein:

• Besucht Google Fonts (Link: https://www.google.com/fonts).
• Wählt euch die gewünschte Schriftart aus.
• Klickt hierzu auf dieses Symbol:
  
• Wählt die Styles bzw. Schriftschnitte aus, die ihr benötigt (bold etc.). Bitte beachtet hierbei: Jeder zusätzliche Webfont oder Style hat Einfluss auf die Ladezeit eurer Website. Wählt also nur die Schriftschnitte aus, die ihr auch verwendet! Informationen zu den Ladezeiten bietet die Anzeige zur Page Load oben rechts.
• Scrollt zu Step 3. Diese Zeile bindet ihr in den Header der HTML-Datei ein.
• Scrollt zu Step 4. Diese Zeile nutzt ihr in der CSS-Datei, um die Schriftart einem Element zuzuordnen.
• Fertig!

Nachteile von Webfonts

Wie fast immer gibt es leider auch bei der Nutzung von Webfonts einen kleinen Haken. Wenn ihr viele verschiedene Schriftarten und Styles benutzt, verlängert sich wie schon erwähnt die Ladezeit eurer Website. Daher solltet ihr sparsam und mit Bedacht vorgehen, wenn ihr Webfonts in eurem Webdesign nutzt.

Aber es gilt ja grundsätzlich bei gutem Webdesign: „weniger ist mehr“. Und zu viele verschiedene Schriftarten machen eure Homepagegestaltung eher unübersichtlich und wirken meist unprofessionell.