Webfonts
Die Magie der individuellen Schriftgestaltung
Webfonts sind wie uralte, magische Runen, die deiner Webseite eine unverwechselbare Stimme verleihen. Warum dich mit langweiligen, standardisierten Schriften zufriedengeben, wenn du mit einem Schwung deiner CSS-Zauberhand ganz neue typografische Welten betreten kannst? Webfonts ermöglichen es dir, deine Inhalte mit Persönlichkeit und Charme zu versehen, als ob jedes Wort seinen eigenen, edlen Umhang trüge.
Mit der richtigen Wahl und einem Hauch technischer Magie wird deine Seite nicht nur ein echter Hingucker, sondern auch wunderbar lesbar und benutzerfreundlich. So wird jede Überschrift und jeder Absatz zu einer kunstvollen Schriftrolle, die den Besucher in die Tiefen deines Designs zieht.
Schriften ohne Grenzen
Nutze individuelle Schriftarten direkt aus dem Web und gib deiner Seite Charakter
Magische Schriften
Die Kunst der typografischen Verzauberung
Wenn du etwas mehr Glamour auf deine Seite zaubern möchtest, sind Webfonts der Schlüssel zu deiner Typo-Macht. Diese besonderen Schriftarten, die weit über die üblichen websicheren Optionen hinausgehen, kannst du mit ein paar Zaubertricks lokal speichern und in deinem Design einbinden. Konvertiere deine Schriften in die Formate .woff und .woff2 – die Lieblinge der modernen Geräte –, um die Ladezeiten wie im Flug zu verkürzen. Du kannst deine Schriften zum Beispiel hier konvertieren: transfonter.org
Schnapp dir auf google fonts die Schriftart Open Sans: Mit der @font-face-Regel holst du sie ins Spiel. Speichere sie sicher im fonts-Ordner deines Projekts und lege ihre Werte fest. Von „normal“ bis „fett“, von „schlicht“ bis „kursiv“. Schon bald gleitet dein Text über die Seite wie ein schillernder Drache, der die Luft zerteilt.
- font-family: Der Name der Schriftart, den du im CSS verwenden wirst, hier Open Sans.
- src: Verweist auf die lokal gespeicherten Schriftdateien in den Formaten (format) .woff und .woff2.
- font-weight: Definiert das Gewicht der Schrift, z.B. normal (400) oder fett (700).
- font-style: Sets the font’s style, such as normal or italic.
Schriftbibliotheken findest du unter unter anderem unter diesen Adressen:
Die Google-Schriftarten
Dafont
Einbinden von Schriftarten
So legst du deinen Zauber im CSS an
Um deine Schriften elegant ins CSS zu weben, nutze die @font-face-Regel. Achte genau auf die Pfade. Denn wie ein Magier, der den richtigen Zaubertrank mischt, musst du sicherstellen, dass alles am richtigen Ort ist. Sobald Open Sans geladen ist, kannst du sie stolz im body-Element verwenden. Sollte der Zauber schiefgehen, stehten Arial oder sans-serif bereit, um die Lücke zu füllen – ein treuer Fallback.
@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-Regular.woff2') format('woff2'),
url('fonts/OpenSans-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'OpenSans', Arial, sans-serif;
}
Vielfalt der Schriftarten
Stile und Gewichte im Detail
Für jede Variante deiner Schrift, sei es fett, kursiv oder beides, bedarf es eines eigenen Zauberspruchs – oder sagen wir, einer eigenen @font-face-Regel. So kannst du sicherstellen, dass deine Schrift in jeder Situation perfekt inszeniert ist, ohne Kompromisse bei Stil oder Ausdruck machen zu müssen. Es ist wie das Erstellen eines ganzen Arsenals an Zauberformeln, die du je nach Bedarf einsetzen kannst.
Optimierung der Schriftarten
Die Kunst der schnellen Ladezeiten
Weniger ist mehr, auch bei Schriften. Wenn du deine Seite schnell wie der Wind laden möchtest, wähle nur die Schriftstile und -stärken, die du wirklich brauchst. Mit den modernen Formaten wie .woff2 erreichst du hohe Komprimierung, und schon lädt deine Seite so flink und elegant wie ein Zauberer auf dem Besen fliegt.
In dieser Lektion hast du gelernt…
- Wie du mit
@font-faceindividuelle Schriftarten in dein CSS einbindest, um deinem Design eine einzigartige Typografie zu verleihen. - Warum du Schriften in den Formaten
.woffund.woff2speichern solltest, um Ladezeiten zu optimieren und moderne Geräte zu unterstützen. - Auf welche Weise du Schriftbibliotheken wie Google Fonts oder Dafont nutzen kannst, um eine große Auswahl an Webfonts direkt ins Projekt zu holen.
- Weshalb du mehrere
@font-face-Regeln für verschiedene Schriftstärken und Stile benötigst, um ein konsistentes und flexibles Design zu gewährleisten. - Wie du durch Fallback-Schriften (
sans-serif,Arialetc.) sicherstellst, dass deine Seite auch dann lesbar bleibt, wenn die gewünschte Schrift nicht geladen wird. - Warum es wichtig ist, nur die wirklich benötigten Schriftstile und -gewichte zu verwenden, um die Performance der Webseite zu verbessern.
Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!
Die Schrift der Alten
In einer staubigen Bibliothek, irgendwo zwischen den knarrenden Dielen und den überraschend lebhaften Spinnweben, warten die Schriften der Alten darauf, erweckt zu werden. Doch nur, wer die Geheimnisse von Webfonts und der mystischen @font-face-Regel entschlüsselt, kann diese magischen Schriftarten auf den Seiten tanzen lassen. Mach dich bereit, die verborgenen Buchstaben in all ihrer Pracht zum Leben zu erwecken – und lass den Text flüstern, schreien oder singen, wie es die Alten einst beabsichtigten!
Deine Aufgabe: Binde den Font ImperialScript ein
- Schriftart einbinden:
Verwende die @font-face-Regel, um die Schriftart aus dem fonts-Ordner einzubinden und benenne die Schriftart.
Die Schriftarten verknüpfst du mit diesen Pfaden:
assets/fonts/ImperialScript-Regular.woff
assets/fonts/ImperialScript-Regular.woff2 - Schriftart auf Elemente anwenden:
Setze die Schriftart auf den body, sodass alle Textelemente die neue Schrift verwenden.
Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!
@font-face {
font-family: 'ImperialScript';
src: url('assets/fonts/ImperialScript-Regular.woff2') format('woff2'),
url('assets/fonts/ImperialScript-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'ImperialScript';
}