Toolkit: Google Fonts

Um was geht es?

Schöne Schriftarten auf deiner Website? Webfonts machen's möglich! Mit der CSS-Eigenschaft font-family kann die Schriftart angegeben werden. Das Problem ist jedoch, dass die entsprechende Schriftart auf dem System des Besuchers – jedes potentiellen Besuchers! – installiert sein muss, was bei "exotischen" Schriftarten unwahrscheinlich ist.

Als Lösungsansatz könnte man jeweils die Schriftdatei – üblicherweise eine ttf- oder otf-Datei – zusammen mit seiner Homepage auf dem Server speichern, verlinken und die Clients (automatisch) herunterladen. Noch einfacher geht es mit Google Fonts.

Google Fonts

Google Fonts bietet eine Vielzahl von Schriftarten online zur meist freien (Lizenz variiert je nach Schriftart) Verlinkung an. Das Praktische daran ist, dass die Schriftarten direkt auf den Google-Servern gespeichert sind und nicht noch extra auf den eigenen Server geladen werden muss.

How To?

Besuche die URL https://fonts.google.com
Der Katalog der verfügbaren Schriften wird angezeigt, der nach Belieben gefiltert werden kann. Wähle eine Schriftart aus und klicke in der darauffolgenden Seite auf den Button
Es öffnet sich rechts der Einbettungsdialog.
Kopiere die drei Blöcke <link ...> in deinen Head.
Nachher kannst du in den CSS-Regeln auf die neue Schriftart zugreifen gemäss dem unteren Codeblock.

Beispielseite

Wir verwenden die Schriftart Hurricane.

<!DOCTYPE html>
<html>
	<head>
		<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=Hurricane&display=swap" rel="stylesheet"> 
		<style type="text/css">
			body { 
				font-family: 'Hurricane', cursive;
			}
		</style>
	</head>
	<body>
		<h1>Hurricane</h1>
		<p>Ein Beispielabsatz.</p>
	</body>
</html>

➡ Download HTML | Vorschau | Try It