3.1 Web-Schriften
Das Einbinden von Schriften auf Webseiten spielt eine entscheidende Rolle bei der Erstellung eines einzigartigen und ansprechenden Designs. Web-Schriften ermöglichen die Verwendung von Schriften, die nicht auf dem Computer des Benutzers installiert sind, indem sie vom Server geladen werden. Google Fonts ist einer der beliebtesten Dienste zur Nutzung von Web-Schriften. Sehen wir uns genauer an, wie man Web-Schriften und Google Fonts in Webseiten einbindet.
Web-Schriften sind Schriften, die von einem entfernten Server geladen und auf der Webseite angezeigt werden, auch wenn sie nicht auf dem Gerät des Benutzers installiert sind. Das bietet mehr Flexibilität bei der Schriftwahl und erlaubt ein ansprechenderes Design.
Einbinden von Web-Schriften
Beispiel für das Einbinden von Web-Schriften mit @font-face:
Zuerst müssen die Schriftdateien auf deinen Server geladen werden. Normalerweise sind das Dateien in den Formaten .woff, .woff2,
.ttf, .eot und .svg.
Schritt 2. Verwendung von @font-face in CSS:
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
Vorteile der Verwendung von @font-face:
- Kontrolle: vollständige Kontrolle über Auswahl und Einsatz der Schriften
- Kompatibilität: Unterstützung verschiedener Schriftformate für die Kompatibilität mit verschiedenen Browsern
- WOFF (Web Open Font Format): weit unterstütztes Format für Web-Schriften
- WOFF2: verbesserte Version von WOFF mit besserer Komprimierung
- TTF (TrueType Font): Standardformat für Schriften, das von den meisten Browsern unterstützt wird
- EOT (Embedded OpenType): Format, das von Internet Explorer unterstützt wird
- SVG: Format zur Verwendung von Schriften in SVG-Grafiken
3.2 Google Fonts
Google Fonts bietet eine Sammlung kostenloser Schriften, die leicht in deine Webseite integriert werden können. Der Vorteil der Nutzung von Google Fonts liegt in der einfachen Einbindung und Vielfalt der verfügbaren Schriften.
Einbinden von Schriften mit Google Fonts:
1. Auswahl der Schrift auf der Google Fonts-Website:
Gehe zu Google Fonts und wähle die Schrift aus, die du verwenden möchtest.
2. Erstellen des Links zur Einbindung:
Auf der Seite der ausgewählten Schrift wähle die benötigten Schriftstile aus. Anschließend generiert Google Fonts einen Link zur Einbindung der Schrift.
3. Einfügen des Links in das HTML-Dokument:
Kopiere den generierten Link und füge ihn in den <head>-Bereich deines HTML-Dokuments ein.
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
1. Anwendung der Schriftart in CSS:
Verwende die Eigenschaft font-family, um die Schrift auf die Elemente der Seite anzuwenden.
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
Beispiel der Nutzung von Google Fonts über HTML:
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<p>Dieser Text wird mit der Roboto-Schriftart angezeigt.</p>
</body>
</html>
3.3 Verwendung von CSS @import
Google-Schriften können auch mit der @import-Regel in CSS eingebunden werden.
Beispiel der Nutzung von Google Fonts über @import:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
Vorteile der Nutzung von Google Fonts:
- Einfache Anwendung: Schriften lassen sich leicht mit einer einzigen Codezeile integrieren
- Große Auswahl: Zugang zu einer großen Anzahl von Schriften verschiedener Stile und Kategorien
- Leistungsoptimierung: Schriften werden von leistungsstarken Google-Servern geladen
Das Attribut display="swap" im Code zur Einbindung von Google Fonts verbessert die Leistung und das Benutzererlebnis. Wenn du Web-Schriften einbindest, muss der Browser die Schrift zuerst laden und anzeigen, bevor er den Text darstellen kann. Das kann zu Verzögerungen führen, besonders bei langsamen Internetverbindungen. display="swap" löst dieses Problem, indem es dem Browser mitteilt, während des Ladens der Web-Schrift eine Standardsystemschrift zu verwenden. Sobald die Web-Schrift geladen ist, ersetzt der Browser sie.
Einfluss auf die Leistung:
Bei der Nutzung von Web-Schriften muss deren Einfluss auf die Leistung der Webseite berücksichtigt werden. Das Laden einer großen Anzahl von Schriften oder Schriftstilen kann die Ladezeit der Seite erhöhen. Um diesen Einfluss zu minimieren, befolge bitte die folgenden Empfehlungen:
- Verwende nur die unbedingt notwendigen Schriftstile: Wähle nur die Schriftstile aus, die du wirklich benötigst
- Verwende das Attribut
display="swap": Es zeigt den Text mit einer Systemschrift an, während die Web-Schrift geladen wird, was das Leistungserlebnis der Benutzer verbessert - Optimierung der Schriftauslieferung: Verwende Caching und Preloading, um die Leistung zu verbessern
GO TO FULL VERSION