Benutzerdefinierte Schriftarten 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 gibt viele interessante Schriftarten, die kostenlos verwendet werden können. Lassen Sie uns die Möglichkeiten erkunden, die von https://fonts.google.com/ bereitgestellt werden. Das Hinzufügen einer Google-Schriftart zum Markup ist unkompliziert.
Führen Sie zunächst das folgende Beispiel aus, das die Standardschriftart verwendet. Das p-Element besitzt die folgenden 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.
Zum Vergrößern der Details auf das Bild klicken.
Im Eingabefeld "Search fonts" den gewünschten Schriftartnamen eingeben. In diesem Fall "DM Sans". Sobald die Schriftart erscheint, auf die Karte für "DM Sans" klicken.
Auf der Schriftart-Seite die Schaltfläche "Get font" anklicken.
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 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. Anschließend das Projekt ausführen, um die korrekte Funktion zu überprüfen.
index.html
styles.css
Wir können den Unterschied zwischen der benutzerdefinierten Schriftart und der Standardschriftart beobachten. Darüber hinaus verfügt jeder Browser über eigene Standardschriftarten. Daher ist es wichtig zu wissen, wie benutzerdefinierte Schriftarten auf einer Website verwendet werden können.
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
