HTML & CSS für Einsteiger (Teil 45): Schicke Schriften für die Seite

Ein entscheidender Aspekt für eine optisch ansprechende Webseite ist natürlich deren Schriftbild. Im Verlauf dieser Reihe habt ihr bereits die Möglichkeiten kennengelernt, die euch HTML und CSS hinsichtlich der Schriftgestaltung zu bieten haben. In diesem Video-Training werden diese verwendet, um die Seite aufzupeppen. Dabei werden wir uns übrigens nicht nur den klassischen Varianten widmen. Das Zauberwort für den Einsatz "exotischer" Schriftarten heißt dabei @font-face
.
... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!
Die übliche Variante zur Definition von Schriftarten sieht in etwa folgendermaßen aus:
body { font-family: Arial, Helvetica, sans-serif; }
Hier wird dem
body
-Element die Schriftart Arial
zugewiesen. Sollte diese auf dem System des Betrachters nicht vorhanden sein, wird auf Helvetica
zurückgegriffen. Wenn es auch Helvetica
nicht geben sollte, wird der Browser angewiesen, wenigstens eine Schriftart ohne Serifen zu verwenden. Wirklich kontrollieren lässt sich das dann natürlich nicht. Ihr habt im Endeffekt also keine echte Kontrolle über das Endergebnis. Das, was ihr euch also so schön in GIMP oder Photoshop zurechtgelegt habt, verpufft möglicherweise im Schriftdschungel. Mehr dazu, wie sich dieses Problem lösen lässt, dann aber im Anschluss.Zunächst aber zurück zur klassischen Variante. Nachfolgend findet ihr eine typische Definition, über die das grundlegende Erscheinungsbild der Webseite angepasst wird. Über die
body
-Definition könnt ihr zunächst einmal die grundlegenden Schriftangaben festlegen.body { font-family: Georgia, Times, "Times New Roman", serif; color: #000; font-size: 1.1em; line-height: 150%; } p { font-size: 1.1em; }
Selbstverständlich könnt ihr nun noch die einzelnen Elemente der Seite gesondert gestalten. Dazu zählen beispielsweise die Überschriften, kursive Passagen usw. Denkt in diesem Zusammenhang aber wieder an das Vererbungsprinzip von CSS.
h1 { font-size: 1.6em; }
Webfonts nutzen
Das Problem bei den herkömmlichen Schriftdefinitionen liegt auf der Hand: Letztendlich könnt ihr nicht wirklich sicher sein, dass die von euch angegebene Schriftart tatsächlich beim Betrachter verfügbar ist. Die Browser wählen – sollten sie die Schriftart nicht finden – im Zweifelsfall eine, die der von euch gewünschten ähnlich ist. Eine wirkliche Kontrolle habt ihr somit über das Ergebnis natürlich nicht. Genau an diesem Punkt verschafft@font-face
Abhilfe. Denn hierüber kann man explizit eine Schriftart angeben, die verwendet werden soll. Das funktioniert prinzipiell genauso wie bei Bildern. Man muss also den Pfad zur Schriftartendatei angeben.Eine typische
@font-fac
e-Definition sieht folgendermaßen aus:@font-face { font-family: "Bitstream Vera Serif Bold"; src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf"); }
Den Namen der zu verwendenden Schrift notiert man bei
font-family
. Bis hierhin gibt es also zunächst mal keine Syntaxbesonderheiten. Über src:url()
wird der URL angegeben, unter dem die Webfont-Datei liegt. Wenn theoretisch die Möglichkeit besteht, dass die Schriftart auf den Rechnern der Anwender verfügbar ist, sollte man zusätzlich local
angeben. Diesem local weist man den Namen der Schriftart zu.@font-face { font-family: "Bitstream Vera Serif Bold"; local: "Bitstream Vera Serif Bold"; src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf"); }
Nach der
@font-face
-Definition lassen sich die Webfonts dann ganz normal verwenden.h1 { font-family: "Bitstream Vera Serif Bold"; font-size: 1.2em; color: #3399FF; }
Hier gibt es die Webfonts beispielsweise
Stellt sich nun natürlich die Frage, woher man die betreffenden Webfont-Dateien bekommt. Google hostet beispielsweise zahlreiche dieser Webfonts auf der Seite http://www.google.com/fonts.Diese Fonts kann man direkt über die genannte Seite einbinden.
Ein entsprechender Aufruf sähe folgendermaßen aus:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
Hinter
font-family
wird der gewünschte Webfont angegeben. Auf der genannten Google-Seite findet ihr diese Namen und Aufrufe. Hat man den Webfont eingebunden, kann er dann wie jede andere Schriftart angewendet werden.body { font-family: 'Tangerine', serif; font-size: 1.2em; }
Anhand dieser Abbildung kann man die Auswirkungen erkennen, die das Einbinden der Webfonts auf die Ladezeit der Seite hat. Diese Auswirkungen sind tatsächlich messbar und nehmen mit jedem weiteren Webfont zu.
<link href="http://fonts.googleapis.com/css? family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">
Die einzelnen Webfonts werden also jeweils durch einen senkrechten Strich getrennt hintereinander notiert. Der vollständige Aufruf, der zu der gewählten Kollektion passt, wird auf der bereits genannten Use-Seite angezeigt.
Viele der Webfonts bieten sogenannte Subsets wie Latin oder Kyrillisch. Um diese explizit mit einzubinden, gibt man das gewünschte Subset als Parameterwert an.
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic
Sollen mehrere dieser Subsets verwendet werden, notiert man diese jeweils durch Komma getrennt.
http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic
Der Einsatz dieser Webfont ist allerdings vor einem ganz anderen Hintergrund nicht unumstritten. Zunächst einmal muss beim Aufruf der Seite eine Verbindung zu einem Google-Server hergestellt werden. Umgehen lässt sich das, indem man die Webfont-Datei herunterlädt und auf seinen eigenen Server lädt. Achtet dabei aber in jedem Fall auf die Nutzungsbedingungen der Webfonts, die ihr auf diese Weise verwenden wollt.
Die Schriftdefinition der Beispielseite
Nachfolgend findet ihr die Schriftdefinitionen, die ich für die aktuelle Beispielseite verwenden werde:body { font-family: 'Crimson Text', Helvetica, sans-serif; color: #444; text-decoration: none; line-height: 1.5em; font-size: 1.2em; } p { font-size: 1.1em; } h1 { font-size: 1.6em; color: #3399FF; }
Selbstverständlich könnt ihr zusätzliche Elemente aufnehmen. Im aktuellen Fall reicht diese Syntax aber allemal.
Weitere Teile
- Tutorial: HTML & CSS für Einsteiger (Teil 01): Ein erster Blick auf HTML, CSS & Co.
- Tutorial: HTML & CSS für Einsteiger (Teil 02): Die erste HTML-Seite
- Tutorial: HTML & CSS für Einsteiger (Teil 03): Elemente, Tags und Attribute
- Tutorial: HTML & CSS für Einsteiger (Teil 04): Texte strukturieren
- Tutorial: HTML & CSS für Einsteiger (Teil 05): Texte aufhübschen
- Tutorial: HTML & CSS für Einsteiger (Teil 06): Listen
- Tutorial: HTML & CSS für Einsteiger (Teil 07): Tabellen (01)
- Tutorial: HTML & CSS für Einsteiger (Teil 08): Tabellen (02)
- Tutorial: HTML & CSS für Einsteiger (Teil 09): Grafiken fürs Web (01)
- Tutorial: HTML & CSS für Einsteiger (Teil 10): Grafiken fürs Web (02)
- Tutorial: HTML & CSS für Einsteiger (Teil 11): Hyperlinks definieren (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 12): Hyperlinks definieren (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 13): Formulare (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 14): Formulare (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 15): Formulare (3)
- Tutorial: HTML & CSS für Einsteiger (Teil 16): Formulare (4)
- Tutorial: HTML & CSS für Einsteiger (Teil 17): Formulare (5)
- Tutorial: HTML & CSS für Einsteiger (Teil 18): Semantik fürs Web (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 19): Semantik fürs Web (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 20): Semantik fürs Web (3)
- Tutorial: HTML & CSS für Einsteiger (Teil 21): Semantik fürs Web (4)
- Tutorial: HTML & CSS für Einsteiger (Teil 22): Multimedia für die Webseite (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 23): Multimedia für die Webseite (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 24): iFrames
- Tutorial: HTML & CSS für Einsteiger (Teil 25): Das ist CSS
- Tutorial: HTML & CSS für Einsteiger (Teil 26): So klappt der Zugriff mit den Selektoren (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 27): So klappt der Zugriff mit den Selektoren (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 28): So klappt der Zugriff mit den Selektoren (3)
- Tutorial: HTML & CSS für Einsteiger (Teil 29): Schöner Text durch CSS (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 30): Schöner Text durch CSS (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 31): Farben und Hintergründe
- Tutorial: HTML & CSS für Einsteiger (Teil 32): Außenabstände und Außenränder
- Tutorial: HTML & CSS für Einsteiger (Teil 33): Den Textfluss kontrollieren
- Tutorial: HTML & CSS für Einsteiger (Teil 34): Rahmen
- Tutorial: HTML & CSS für Einsteiger (Teil 35): Listen und Counter
- Tutorial: HTML & CSS für Einsteiger (Teil 36): Das Boxmodell
- Tutorial: HTML & CSS für Einsteiger (Teil 37): Elemente positionieren
- Tutorial: HTML & CSS für Einsteiger (Teil 38): Alles im Fluss mit float
- Tutorial: HTML & CSS für Einsteiger (Teil 39): Die verschiedenen Layoutvarianten
- Tutorial: HTML & CSS für Einsteiger (Teil 40): Zwei- und dreispaltige Layouts
- Tutorial: HTML & CSS für Einsteiger (Teil 41): Das Layout entwickeln
- Tutorial: HTML & CSS für Einsteiger (Teil 42): Das Layout weiter anpassen
- Tutorial: HTML & CSS für Einsteiger (Teil 43): Das Grundgerüst erstellen
- Tutorial: HTML & CSS für Einsteiger (Teil 44): Den Inhaltsbereich gestalten
- HTML & CSS für Einsteiger (Teil 45): Schicke Schriften für die Seite
- Tutorial: HTML & CSS für Einsteiger (Teil 46): Das Kontaktformular (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 47): Das Kontaktformular (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 48): Die Webseite geht online

Passend zum Inhalt empfehlen wir:
Modernes CSS mit Sass – Praxis-Tutorial
Vielen Dank für das interessante Tutorial
Herzlichen Dank für das Tutorial!
Vielen Dank für Teil 45.
Vielen Dank!
Vielen Dank für das Tutorial.
Danke!
Herzlichen Dank für das Tutorial.
Vielen Dank für das informative Tutorial.
Ich bedanke mich für das interessante Tutorial.
Vielen Dank für das Tutorial.
Sehr gut erklärt! Vielen dank!
Vielen Dank für das Tutorial. :)
Klasse Tutorial! Danke!!
Vielen Dank für das sehr informative Tutorial!
Super - Danke für diesen weiteren Teil. MfG
Großen Dank für das Video.
LG Zaina
Vielen Dank für das interessante Tutorial.
Super, vielen Dank für das weitere informative Video.
Vielen Dank für das gute und interessante Video.
Ich bedanke mich für das lehrreiche und interessante Tutorial.
Mehr anzeigen