Fonts einbinden

Will man Fonts, die nicht auf dem Rechner des Besuchers einer Website vorhanden sind, auf der Website verwenden, greift man in letzter Zeit (wieder) auf die CSS Angabe „@font-face“ zurück.

Um diese Technik verwenden zu können, muss die Schriftart zunächst in ein geeignetes Format konvertiert und auf dem Server abgelegt werden. Firefox und Chrome können mit dem zukunftsweisenden Format „WOFF“ umgehen. Um den Internet Explorer ( <Version 9) zu bedienen hält man zusätzlich eine Font-Datei im Format „eot“ vor, für den Opera und Safari das Format „svg“.

Das Umwandeln der Schriftart „TTF“ übernimmt der @font-face Kit Generator: Fontsquirrel

Wichtig ist darauf zu achten, dass die Schrift frei ist, bzw. dass die Lizenzvereinbarungen eine derartige Nutzung zulassen. Bei den meisten kommerziellen Schriften dürfte ein Einsatz im Web mit dieser Technik nicht erlaubt sein. Man ist auf der sicheren Seite, wenn man sich eine lizenzfreie Schrift aussucht, z.B. von den Websites www.fontsquirrel.com oder www.dafont.com und ähnliche.

Eingebunden wird eine Schrift dann in der CSS Datei mit folgenden Angaben:

In der Css kann nun einfach die Schrift dem Element zugewiesen werden.
Entweder „Global“ für alle Elemente

Schriftgrößen

Sollen sich die Schriftgrößen skalierbar verhalten müssen, machen wir zusätzlich die Angaben in rem.

Der Begriff der CSS3-Schriftgrößeneinheit rem (= root em) gemeint. rem verhält sich genauso wie em mit dem einzigen Unterschied, dass das sich der „rem-Wert“ am Root-Element orientiert (also an der Schriftgröße, für body, statt sich wie em an der Schriftgröße des jeweiligen Eltern-Elements zu orientieren.

Wenn im Root-Element ( z.B. body {font-size: 100%} ) der Wert auf 100% gesetzt wird, entspricht das in den meisten Browsern einer Standard-Schriftgröße von 16 Pixel. An diesem Standard-Wert kann man sich jetzt orientieren und alle weiteren Schriftgrößen in rem definieren.

Pixel in rem umrechnen

Für eine Schriftgröße von 18px (z.B. für Überschriften) ist der Schriftgrößen-Wert also font-size: 1.125rem.

Umgerechnet werden können Pixel-Werte, indem man den Pixelwert durch 16 teilt (18/16 = 1.125) Vorausgesetzt man geht von der 16px Standard-Schriftgröße aus und die font-size des Root-Elements ist auf 100% gesetzt.