Benutzerdefinierte Schriftarten zu einer Webseite Hinzufügen
Schriftarten prägen das Erscheinungsbild und die Atmosphäre einer Website maßgeblich. Hochwertige Typografie verbessert die Lesbarkeit und macht ein Design einprägsamer. Viele Schriftarten sind kostenlos nutzbar, andere erfordern eine Lizenzierung – Urheberrechte sind stets zu beachten.
Google Fonts Service
Es stehen zahlreiche interessante Schriftarten zur kostenlosen Nutzung bereit. Im Folgenden werden die Möglichkeiten von https://fonts.google.com/ vorgestellt. Das Hinzufügen einer Google-Schriftart zum Markup ist unkompliziert.
Zunächst wird das folgende Beispiel ausgeführt, das die Standardschriftart verwendet. Das p-Element besitzt die Eigenschaften: font-family (Schriftname), font-size (Schriftgröße) und font-weight (Schriftstärke).
index.html
styles.css
Die Eigenschaft font-family funktioniert nicht, da unser Projekt die benutzerdefinierte Schriftart "DM Sans" noch nicht kennt. Fügen wir die Schriftart dem Projekt hinzu, indem wir https://fonts.google.com/ verwenden.
Geben Sie im Eingabefeld "Search fonts" den gewünschten Schriftartnamen ein. In diesem Fall ist es "DM Sans". Sobald die Schriftart erscheint, klicken Sie auf die Karte für "DM Sans".
Klicken Sie auf der Seite der Schriftart auf die Schaltfläche "Get font".
Als Nächstes auf die Schaltfläche "Get embed code" klicken.
Abschließend den Link kopieren und im HTML-Dokument des Projekts innerhalb des <head>-Elements einfügen. Es ist wichtig, den Link vor dem Link zu den eigenen Styles einzufügen. Dadurch wird sichergestellt, dass der Browser die benutzerdefinierten Schriftarten zuerst lädt, bevor Styles angewendet werden, die diese verwenden. Nach dem Hinzufügen des Links steht "DM Sans" als benutzerdefinierte Schriftart für das Projekt zur Verfügung. Nun das Projekt ausführen, um zu überprüfen, ob alles korrekt funktioniert.
index.html
styles.css
Wir können den Unterschied zwischen der benutzerdefinierten Schriftart und der Standardschriftart beobachten. Zusätzlich verfügt jeder Browser über eigene Standardschriftarten. Daher ist es wichtig zu wissen, wie benutzerdefinierte Schriftarten auf einer Website verwendet werden.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Großartig!
Completion Rate verbessert auf 2.56Benutzerdefinierte Schriftarten zu einer Webseite Hinzufügen
Swipe um das Menü anzuzeigen
Schriftarten prägen das Erscheinungsbild und die Atmosphäre einer Website maßgeblich. Hochwertige Typografie verbessert die Lesbarkeit und macht ein Design einprägsamer. Viele Schriftarten sind kostenlos nutzbar, andere erfordern eine Lizenzierung – Urheberrechte sind stets zu beachten.
Google Fonts Service
Es stehen zahlreiche interessante Schriftarten zur kostenlosen Nutzung bereit. Im Folgenden werden die Möglichkeiten von https://fonts.google.com/ vorgestellt. Das Hinzufügen einer Google-Schriftart zum Markup ist unkompliziert.
Zunächst wird das folgende Beispiel ausgeführt, das die Standardschriftart verwendet. Das p-Element besitzt die Eigenschaften: font-family (Schriftname), font-size (Schriftgröße) und font-weight (Schriftstärke).
index.html
styles.css
Die Eigenschaft font-family funktioniert nicht, da unser Projekt die benutzerdefinierte Schriftart "DM Sans" noch nicht kennt. Fügen wir die Schriftart dem Projekt hinzu, indem wir https://fonts.google.com/ verwenden.
Geben Sie im Eingabefeld "Search fonts" den gewünschten Schriftartnamen ein. In diesem Fall ist es "DM Sans". Sobald die Schriftart erscheint, klicken Sie auf die Karte für "DM Sans".
Klicken Sie auf der Seite der Schriftart auf die Schaltfläche "Get font".
Als Nächstes auf die Schaltfläche "Get embed code" klicken.
Abschließend den Link kopieren und im HTML-Dokument des Projekts innerhalb des <head>-Elements einfügen. Es ist wichtig, den Link vor dem Link zu den eigenen Styles einzufügen. Dadurch wird sichergestellt, dass der Browser die benutzerdefinierten Schriftarten zuerst lädt, bevor Styles angewendet werden, die diese verwenden. Nach dem Hinzufügen des Links steht "DM Sans" als benutzerdefinierte Schriftart für das Projekt zur Verfügung. Nun das Projekt ausführen, um zu überprüfen, ob alles korrekt funktioniert.
index.html
styles.css
Wir können den Unterschied zwischen der benutzerdefinierten Schriftart und der Standardschriftart beobachten. Zusätzlich verfügt jeder Browser über eigene Standardschriftarten. Daher ist es wichtig zu wissen, wie benutzerdefinierte Schriftarten auf einer Website verwendet werden.
Danke für Ihr Feedback!
