Webfonts

Bisher haben wir Schriften verwendet, die auf fast jedem Computer installiert sind, etwa Arial, Verdana, Georgia, Times New Roman oder Courier New. Man nennt sie manchmal websichere Schriften. Auf sie kannst du dich verlassen, aber es gibt nur wenige, und viele Websites benutzen sie.

Ein Webfont wird zusammen mit der Seite aus dem Internet heruntergeladen, sodass ihn jeder Besucher sieht, auch wenn er auf seinem Gerät nicht installiert ist. Tausende kostenlose Webfonts findest du bei Google Fonts. Dort wählst du eine Schrift und die gewünschten Stärken, und die Seite gibt dir ein Stück HTML, das du in das Element head deiner Seite einfügst. Für die Schrift Inter in den Stärken 400, 700 und 900 sieht es so aus:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">

• Die ersten beiden Zeilen (preconnect) sagen dem Browser, dass er sich sofort mit den Servern von Google verbinden soll, damit die Schrift früher heruntergeladen wird. Die Seite würde auch ohne sie funktionieren, nur etwas langsamer. Das Attribut crossorigin wird wegen der besonderen Art gebraucht, wie Browser Schriften herunterladen; kopiere es einfach.
• Die dritte Zeile bindet ein Stylesheet ein, genau wie das link zu unserer Datei style.css, aber dieses Stylesheet liegt auf dem Server von Google und sagt dem Browser, woher er die Schriftdateien herunterladen soll. family=Inter:wght@400;700;900 bedeutet die Schrift Inter in den Stärken 400, 700 und 900, und display=swap bedeutet, dass der Text, bis die Schrift ankommt, in einer Ersatzschrift angezeigt wird.

Dann verwenden wir die Schrift in CSS:

body {
	font-family: Inter, Arial, sans-serif;
}

Die anderen Schriften behalten wir als Ersatz in der Liste, falls sich der Webfont nicht herunterladen lässt. Der Name Inter hat keine Leerzeichen und braucht deshalb keine Anführungszeichen, aber "Inter" funktioniert auch. Einen Namen mit Leerzeichen, etwa Open Sans, schreibe in Anführungszeichen: "Open Sans".

Ein Webfont hat nur die Stärken, die wir herunterladen. Wir haben 400, 700 und 900 angefordert, also können wir die Hauptüberschrift endlich extra fett machen.