Wie installiere ich einen WebFont?

Webfonts werden von den wichtigsten Browsern unterstützt jedoch nicht immer auf die selber Weise. Es gibt gegenwärtig vier unterschiedliche Font Formate welche berücksichtigt werden müssen. Akzeptiert werden die Formate TTF, WOFF, EOT und SVG.

1. Hochladen eines Webfonts
Lade den WebFont-Satz auf Deine Website. Er sollte vorzugsweise im selben Verzeichnis in der auch die CSS Datei liegt abgelegt werden.

2. Einbinden des WebFont Stylesheet
Die spezielle CSS @font-face Beschreibung hilft den unterschiedlichsten Browsern die dazugehörige Schrift auszuwählen.
Der CSS Code für die Einbindung ist folgender:
@font-face {
font-family: 'MyWebFont';
src: url('WebFont.eot');
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
url('WebFont.woff') format('woff'),
url('WebFont.ttf') format('truetype'),
url('WebFont.svg#webfont') format('svg');
}

Alles was Du nun noch tun musst ist das StyleSheet mit Deiner HTML Seite zu verlinken.
Dazu platzierst Du folgende Zeile im Head Bereich der HTML Seite.
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

3. Bearbeite das StyleSheet
Dem StyleSheet gibt Du nun die Informationen wie Du zukünftig die neue Schrift nutzen möchtest. Schau dir dazu die original
@font-face Beschreibung der Eigenschaft “font-family” an. Der verlinkte Name ist die Font Referenz. ‘webfont’ ist dem Namen in der font-family im selben Selektor wie folgt vorangestellt.
p { font-family: 'WebFont', Arial, sans-serif; }

4. Testen
WebFonts zum laufen zu bekommen ist sehr einfach. Nutze die Informationen in der Sidebar deines ausgewählten Browsers wenn der neue Font einmal nicht geladen werden sollte.