Skip to content

Mit der @fontface-Regel Schriften einbetten

Arne Rahn

Weniger als 1 MinuteLesezeit min

Die Verwendung einer speziellen Schrift ist von vielen Aspekten abhängig. Primär sollte sie in einem Projekt immer auf die Zielgruppen abgestimmt sein. Ein zweiter entscheidender Grund ist die Wiedererkennung einer Marke oder Firma.

Im Rahmen eines Style Guides werden sogenannte Hausschriften definiert, die bei jeglichen Maßnahmen der Firma Verwendung finden. Und nicht selten folgt der Einsatz einer speziellen Schrift einfach nur den gerade herrschenden Trends. Derzeit sehr beliebt sind die zahlreichen Schreib,- und Handschriften.

Wie Du eine solche Schrift in Dein Projekt einbinden kannst, will ich Dir heute in diesem Artikel zeigen.

Passende Schrift suchen

Wenn Du noch keine passende Schrift auf deinem System hast, solltest Du als aller erstes auf „Einkauftour“ gehen. Mit der richtigen Suche findest Du mittlerweile sehr viele Anbieter im Netz. Die Angebote reichen von Kostenlos bis zu speziellen Lizenzverträgen.

Gängige Plattformen sind:

Dafonts.com
MyFonts.com
CreativeMarket.com
FontSquirrel.com
Goggle Font.de

Achte auch bei kostenlosen Angeboten auf etwaige Lizenzvereinbarungen (z.Bsp. CC-Lizenzen). In der Regel erhältst Du im Downloadpaket das Schriftenpaket, Hinweise zum Einbinden und die Lizenzvereinbarung. Die Schriften liegen zumeist im *.ttf und *.otf Format vor.

Formate und Browser

Um eine breite Browserunterstützung zu erreichen, benötigst Du mindestens noch ein weiteres Format, dass WOFF (Web Open Font Format) oder dessen Nachfolger WOFF2. Alle aktuellen Versionen der Browser unterstützen das standardisierte und für das Web angepasste Format.

Auch für ältere Browser gibt es speziell unterstützende Formate. (z. Bsp. *.eot  – Embedded Open Type für Explorer® Ver. 5.5+, *.svg – Scalable Vector Graphics für Safari® Ver. 3.1+ und Android® Ver. 3+). Grundsätzlich lassen sich alle Format mit der @fontface- Regel in ein Projekt einbinden.

Ob es immer Sinn macht ist letztlich von Projekt und Zielgruppe abhängig. Die Marktanteile einiger älteren Browser ist so geschwinden gering, dass man sie durchaus außer Acht lassen kann.

Webfonts werden seit 2015 auf allen gängigen Systemen unterstützt

  • Apple® Webkit/Safari® ab Version 3.1
  • Microsoft® Internet Explorer® ab Version 4
  • Google Chrome® ab Version 4.0
  • Mobile Safari® in allen Versionen (für iPhone®, iPad®, iPod®)
  • Mozilla® Firefox® ab Version 3.5
  • Opera® ab Version 10.10

Der Webfont Generator

Es gibt mehrere Anbieter, die es ermöglichen, Schriften in die verschiedenen Webformate zu konvertieren. Den „Webfont Generator“ von fontsquirrel möchte ich Dir an dieser Stelle etwas näher vorstellen.

Auf der Startseite vom „Webfont Generator“ kannst Du nun deine Schrift hochladen. Auch an dieser Stelle kommt noch einmal die Abfrage, ob Du die erforderlichen Lizenzen besitzt. Erst dann ist der Upload möglich. Wähle den Modus „Expert…“ um erweiterte Einstellungsmöglichkeiten zu erhalten.

Im oberen Bereich wähle nun Deine erforderlichen Formate aus. In der Reihe „X-height Matching“ besteht u.a. die Möglichkeit sogenannte Fallbackschriften anzugeben. Die Einstellung „Optimal“ biete Dir keine weiteren Optionen. Im Paket sind nur das Format WOFF und WOFF2 enthalten.

@fontface in Dein Projekt einbetten

Im Unterschied zum Fremdhosting (z. Bsp. Google Fonts) verwaltest Du deine Schriftpakete auf deinem Server. Dazu musst Du dir als erstes einen neuen Ordner „fonts“ im Hauptroot (/meinProjekt) deiner Seite anlegen. Hast Du eine WordPress-Installation auf dem Server dann kommt dieser Ordner in den Hauptroot deines Templates. Idealerweise benutzt Du bereits ein Child-Themes, dann in der Hauptroot des Child-Themes.

Im nächsten Schritt muss Du deinem System mitteilen das es eine neue Schrift benutzen soll. Der Befehl – die @fontface-Regel – schreibst Du wie folgt in deine Custom CSS Datei.

@font-face { font-family: 'MeineSchrift';
             src: url('pfad/zu/deinerschrift.ttf') format('truetype'); }

Achte darauf das der Pfad korrekt eingetragen ist (../ Ordner navigiert aus eine Ordner heraus, /Ordner navigiert in eine Ordner rein). Auch der Schriftname und das Schrift-Format müssen nicht immer zwangsläufig übereinstimmen. Sollte es Probleme geben, überprüfe die jeweiligen Schreibweisen.

Im letzten Schritt definierst Du in deiner Custom CSS Datei die Tags, die Du mit der neuen Schrift verwenden möchtest.

H1 { font-family: MeineSchrift, arial, sans-serif; }

Neben der generischen Schriftfamilie definiere zusätzlich immer eine Fallbackschrift (w.i.Bsp. Arial). Auch Browser die die @fontface-Regel verstehen müssen die Gelegenheit haben auf eine Ausweichschrift zurückzufallen bis die eigentliche Font-Ressource geladen ist. Des Weiteren kommt es den älteren Browsern zu Gute die diese Regel nicht verstehen. Auf diesen Weg kann dem Browser eine mögliche alternative Schrift vorgeschlagen werden.

Eine breite Browserunterstützung

Um die oben angesprochene erweiterte Browserunterstützung zu gewärleisten müssen auch alle anderen Formate in die @fontface-Regel mit eingebunden werden. Das Code-Beispiel von oben sieht – mit allen möglichen Formaten – wie folgt aus:

@font-face {
 font-family: 'MeineSchrift';
 src: url('Ordner/MeineSchrift.eot'); /* IE9 Compat Modes */
 src: url('Ordner/MeineSchrift.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('Ordner/MeineSchrift.woff') format('woff'), /* Modern Browsers */
 url('Ordner/MeineSchrift.ttf') format('truetype'), /* Safari, Android, iOS */
 url('Ordner/MeineSchrift.svg#MeineSchrift') format('svg'); /* Legacy iOS */
 }

Auszeichnungen

Zusätzlich können in der @fontface-Regel auch Eigenschafts-Deskriptoren angegeben werden. (z. Bsp: „font-style“, „font-weight“, „font-stretch“ und „font-rendering“). Diese machen vor allem Sinn, wenn mehrere Schriftschnitte geladen werden sollen. Die vollständige @fontface-Anweisung sieht dann so aus:

@font-face {
 font-family: 'MeineSchrift';
 src: url('Ordner/MeineSchrift.eot'); /* IE9 Compat Modes */
 src: url('Ordner/MeineSchrift.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('Ordner/MeineSchrift.woff') format('woff'), /* Modern Browsers */
 url('Ordner/MeineSchrift.ttf') format('truetype'), /* Safari, Android, iOS */
 url('Ordner/MeineSchrift.svg#MeineSchrift') format('svg'); /* Legacy iOS */
 font-style: normal;
 font-weight: normal;
 text-rendering: optimizeLegibility;
}

Geschafft!

Du verwaltest jetzt Deine eigene Schrift und kannst sie ganz individuell in Deinem Projekt benutzen. Arbeitest Du auch mit eigenen Schriften auf Deinem System. Verrate es mit unten in den Kommentaren.

1.2/5 - (4 votes)

2 Comments

  1. Themify Pagebuilder für Wordpress - Review - Arne Rahn Mediendesign
    27. Oktober 2020 @ 19:09

    […] Spätestens bei Einführung der DSGVO im Mai 2018 kam auch die Überlegung auf, wie mit der Einbindung von Google Fonts umgegangen werden soll. Die Geister scheiden sich immer noch an der Frage ob es datenschutztechnisch bedenklich oder unbedenklich ist. Eine sichere Variante, um allen Problemen aus dem Weg zu gehen ist, diese auf seinen System selbst zu hosten. Eine Methode, die auch unter WordPress umsetzbar ist, die “@FontFace-Regel”! […]

    Reply

  2. Themify Custom Font - Schriften selbst verwalten - Arne Rahn Mediendesign
    28. Dezember 2020 @ 10:43

    […] selbst zu verwalten und in ein Webprojekt einzubinden. Ich hatte hierzu auch schon einmal eine ausführlichen Beitrag geschrieben. Hierbei waren allerdings einige Kenntnisse in CSS erforderlich, um die benötigten […]

    Reply

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert