Eigene Schriftarten via CSS3

Einbetten von Schriftarten in Web-Dokumente

Font-Auswahl

Zunächst benötigt man natürlich eine passende Schriftart. Im Web gibt es zahlreiche Anbieter für kostenlose und kommerzielle Fonts. Für meine Zwecke hat sich bisher dafont.com als die primäre Anlaufstelle erwiesen. Hier gibt es eine Menge kostenlos nutzbarer Fonts und die Auswahl fällt dank benutzerfreundlichem Seitenaufbau relativ leicht. Die Schriftarten werden im TTF- (TrueType Font) und/oder OTF-Format (OpenType Font) angeboten.

Hat man seinen Font erst einmal ausgewählt (hierbei auf jeden Fall die jeweiligen Lizenzbestimmungen beachten!) und heruntergeladen, muss die Schriftart noch für den Web-Einsatz konvertiert werden. Auch hierfür gibt es im Web zahlreiche Anlaufstellen, wie z. B. Font2Web (Online-Konverter, der sowohl TTF- als auch OTF-Dateien unterstützt).

Font-Dateien bereitstellen

Damit die Schriftarten für spätere Website-Besucher verfügbar sind, müssen sie natürlich im Web veröffentlicht sein. Die Schriftart-Dateien können z. B. mithilfe eines FTP-Clients auf den Web Server kopiert werden. Entsprechende Zugangsdaten sollten selbstverständlich bekannt sein.

In Contao 3.0 gibt es ein Verzeichnis namens "assets", welches alle generierten Bilder, Stylesheets und JavaScript-Dateien sowie sämtliche externe Skripte wie z.B. MooTools und jQuery beinhaltet. Hier habe ich ein Unterverzeichnis namens "fonts" erstellt, in dem ich wiederum für jede Schriftart ein Unterverzeichnis erstellt habe. Je Schriftart werden hier nun die Font-Dateien der verschiedenen Style-Eigenschaften (z. B. normal, bold, italic) in den verschiedenen Dateiformaten (.eot, .otf, .svg, .ttf, .woff) gesammelt. Auch wenn das grundlegende Tag inzwischen von allen gängigen Browsern unterstützt werden, sollten zur Kompatibilitätsmaximierung alle verfügbaren Formate verwendet werden. Die folgende Übersicht zeigt die Kompatibilität der gängigen Browser mit den verfügbaren Dateiformaten auf:

  .woff.otf.ttf.eot.svg
Internet Explorer 9+   9+ 4+  
Mozilla Firefox 3.6+ 3.5+ 3.5+    
Google Chrome 6+ 4+ 4+   4+
Safari   3.1+ 3.1+   3.1+
Opera 11.1+ 10+ 10+   10+
iOS Mobile Safari   4.2+ 4.2+   3.2+

Schriftartdefinition

Um die neu bereitgestellten Fonts in der eigenen Website verwenden zu können, müssen diese dem Browser des späteren Besuchers zunächst bekannt gemacht werden. Hierzu wird die @font-face-Regel verwendet.

Die Verwendung der Regel ist unter www.font-face.com ausreichend dokumentiert. Das folgende Beispiel zeigt, wie die Font-Dateien geladen werden können:

/* handscript (normal) */
@font-face {
font-family: handscript;
src: url('../fonts/daniel/normal.eot'),
  url('../fonts/daniel/normal.woff') format('woff'),
  url('../fonts/daniel/normal.ttf') format('truetype'),
  url('../fonts/daniel/normal.svg') format('svg');
}

Schriftarten verwenden

Die Schriftarten können dann via CSS zur Formatierung von Textelementen verwendet werden. Hierzu wird das bekannte font-family-Tag in Verbindung mit dem eben vergebenen Font-Namen gesetzt:

h1 {
	font-family: handscript;
}

Das war's schon. Ich hoffe, die obigen Hinweise konnten euch helfen. Leider reicht meine Zeit nicht für eine detailliertere Schritt-für-Schritt-Anleitung. Sollte ich in Zukunft mal wieder etwas mehr Zeit haben, werde ich diese aber noch nachreichen.

Zurück

Einen Kommentar schreiben

Sie müssen sich anmelden, um Kommentare hinzuzufügen.

Die Kommentarfunktion ist nur für registrierte Benutzer freigeschaltet. Registrieren