Magento – @font-face funktioniert nicht

Mannomann, was habe ich am Font-Face-Problem rumgespielt bis es endlich geklappt hat.

Ich will gar nicht lange auf die Einzelheiten eingehen, sondern nur kurz und knapp eine Anleitung geben:

Problem: Ich möchte eine eigene Schriftart in die Seite integrieren, die ich lokal auf dem Server zur Verfügung stelle.

Um diese nun in ein Template einzubinden, verwende ich den @font-face Befehl in der geladenen CSS-Datei. Und zwar ganz vorne.

@font-face {
font-family: "MeineSchriftart";
src: url('http://www.meine-domain.de/skin/frontend/MeinTheme/MeinTheme/fonts/meineSchriftart.eot');
src: url('http://www.meine-domain.de/skin/frontend/MeinTheme/MeinTheme/fonts/meineSchriftart.eot?#iefix') format('embedded-opentype'),
url('http://www.meine-domain.de/skin/frontend/MeinTheme/MeinTheme/fonts/meineSchriftart.ttf') format('truetype'),
url('http://www.meine-domain.de/skin/frontend/MeinTheme/MeinTheme/fonts/meineSchriftart.otf') format('otf'),
url('http://www.meine-domain.de/skin/frontend/MeinTheme/MeinTheme/fonts/meineSchriftart.woff') format('woff');
font-weight: normal;
font-style: normal;
}

Die Schriftart-Dateien liegen dann natürlich im o.g. Verzeichnis. Selbstverständlich muss man nicht alle Formate anbieten. WOFF ist das wohl aktuell am kompatibelste. Es gibt einige Online-Konverter, die einem aus seiner Schriftart die anderen Formate erstellen, die man dann auf dem Server ablegen kann.

Damit sollte man dann eigentlich in der Lage in einer CSS-Klasse und “font-family: “MeineSchriftart”;” die gewünschte Schriftart zu lassen.

Leider klappt dies ziemlich häufig nicht wie gewünscht und man sucht und sucht den Fehler.

Generell ist einer der wichtigsten Punkte, dass die URL genauso lauten sollte, wie die als Basis-URL genannte Domain. Hat man also eine Subdomain hinterlegt, sollte man auch diese laden. Die Domain sollte der entsprechen, die auch im Browser angezeigt wird, wenn man die Seite lädt.

Hier hatte ich einmal versucht die Schrift bei einem Multishop von einer anderen Domain (anderer Shop derselben Installation) zu laden, der Shop hat sich aber leider geweigert.

Bislang habe ich noch keine Lösung gefunden einen dynamischen Pfad zu verwenden. Es musste immer der absolute Pfad sein.

Wichtig ist auch: Hat man in der Basis-URL eine htttp-Adresse eingetragen, muss die zu ladende Adresse ebenso eine http-Adresse sein. Verwendet man aber durchwegs https, muss es auch https sein!

Ich hoffe, dass es dem einen und anderen hilft.

Published by Covos

Seit 2009 arbeite ich nun intensiv mit Magento. Begonnen habe ich mit der Erstellung und dem Betrieb von B2C-Shops. Ausgeweitet wurde dies durch meine Tätigkeit im Logistik-Sektor. Hieraus entstanden erste spezialisierte B2E-Systeme. Heute arbeite ich tag-täglich mit spannenden B2C-, B2B- und B2E-Projekten und berichte in diesem Blog über Herausforderungen und gebe Insider-Tipps.

Leave a Reply

Your email address will not be published. Required fields are marked *