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.
Einen Kommentar schreiben
Sie müssen sich anmelden, um Kommentare hinzuzufügen.