Frontend Development

# Webfonts

# Warum Webfonts?

Typografie ist wichtig, um nuanciert gestalten zu können. Leider ist die Palette an verfügbaren Schriften limitiert. Grundsätzlich kann jede Schrift, die du auf deinem Computer installiert hast, auch im Web verwendet werden. Sollte jedoch jemand anderes deine Website öffnen und diese Person hat die Schrift nicht installiert, dann zeigt der Browser seine Standardschrift an. Das Ergebnis ist meist nicht sehr ansehnlich.

Hier werden Webfonts nützlich. Webfonts ermöglichen es, jede Schrift auch auf einer Website anzuzeigen. Heute sind die Formate WOFF und WOFF2 (für modernere Browser) geläufig. WOFF steht für “Web Open Font Format”.

# Lizenzen

Sofern du eine lizenzpflichtige Schrift gekauft hast, darfst du sie nicht automatisch im Web benutzen. Schriftanbieter verkaufen für das Web seperate Lizenzen. Eine alternative bieten frei nutzbare Onlinebibliotheken

# Verwendung

Webfonts kannst du selber als WOFF- und WOFF2-Datei in deiner Website einbetten. Eine Alternative bieten Google Fonts oder Brick, bei denen über ein <link>-Tag im <head> die Schrift bequem eingebettet werden kann. Du wirst die zweite Variante lernen.

So wenig Webfonts wie nötig

Webfonts sind wie Gepäck bei einer Bergwanderung: lieber nicht zuviel mitnehmen, nur das, was du wirklich brauchst. Generell gilt: so wenig Webfonts und Schriftschnitte wie möglich verwenden, weil jede Schrift und jeder Schriftschnitt die deine Website vergrössert und langsamer laden lässt.

# Beispiel

Im folgenden Beispiel werden wir die Schrift “Libre Franklin” verwenden, gehostet auf Google Fonts.

  • Gehe zur Seite von Libre Franklin auf Google Fonts
  • Du siehst verschiedene Schriftschnitte, du möchtest jedoch nur Überschriften auf deiner Website in einem Webfont setzen. Deswegen wähle beim Schriftschnitt “Bold 700” den Button “Select this style”.
  • In deinen “Selected Families” kannst du sämtliche Schriften sehen, die du einbetten wirst. Google Fonts fasst diese zusammen, sodass du immer nur ein <link>-Tag einbetten musst.
  • Kopiere den Code im Tab “Embed” und füge ihn an beliebiger Stelle im <head>-Bereich deines HTML-Dokuments ein.
    <link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@700&display=swap" rel="stylesheet">
  • Du kannst jetzt in deinem CSS mit der font-family-Property die Schrift “Libre Franklin” verwenden.
    h1 {
  font-family: "Libre Franklin", Arial, sans-serif;
}
    Arial ist die zweite Schrift, die verwendet wird, sollte der Browser Libre Franklin nicht laden können. Sollte auch Arial nicht verfügbar sein, so wird die standardmässige serifenlose Schrift des Browsers geladen (sans-serif).

Schreibweise

Bei Schriften mit einem Leerzeichen musst du diese in "Anführungszeichen" setzen, das ist bei "Libre Franklin" der Fall.

# Ressourcen

Lizenzfreie Webfonts, die bereits gehostet sind:

← Responsive Design →