Über den Dateimanager können z. B. “.woff” und “.woff2” Web-Schriften hochgeladen werden, die von allen gängigen Browsern unterstützt werden (vgl.: https://caniuse.com/?search=woff2 ).
Schriftarten konvertieren
Wenn der Kunde beispielsweise nur eine “.eot” oder “.otf” Datei anliefert, kann diese Datei nicht über den Dateimanager hochgeladen werden, da diese Formate aktuell (22.01.25) nicht erlaubt sind.
Hier muss ein Umweg über einen Konverter (z. B. https://www.fontsquirrel.com/tools/webfont-generator ) gegangen werden. Dort lädt man die Schriftart hoch und wählt beim Menüpunkt “Expert…” die Dateiformate “.woff” und “.woff2” aus:
Alle weiteren Optionen können standardmäßig eingestellt bleiben, anschließend klickt man weiter unten auf “download your kit”. Es wird die hochgeladene Datei in das gewünschte Format konvertiert und eine “.zip”-Datei wird anschließend heruntergeladen. In dieser Datei befinden sich, neben anderen nicht benötigten Dateien, die beiden “.woff” und “.woff2” Dateien.
In der Administration hochladen
Diese beiden Dateien können nun über den Dateimanager hochgeladen werden:
Man erhält z. B. den Dateipfad “/m/s/Futura-Book.woff”, dieser ist für den nächsten Schritt wichtig.
Schriftart per CSS einbinden
Um die Schriftart im Shop zu verwenden, wird entweder eine bereits angelegte “.css” Datei erweitert oder eine neue “.css” Datei angelegt. In dieser Datei wird nun die Schriftart eingebunden:
@font-face {
font-family: 'helvetica-rg';
src: url('/m/s/Helvetica-55Rg.woff');
src: url('/m/s/Helvetica-55Rg.woff2') format('woff2');
font-style: normal;
}
Hier wurde z. B. die Schriftart “helvetica-rg” (wichtig: auf die Benennung achten!) eingebunden.
Um die “helvetica-rg” nun zu verwenden wird folgender Befehl in der gleichen “.css” Datei unter dem o. g. “@font-face” Befehl hinzugefügt:
*, body {font-family: 'helvetica-rg'}
.fa {font-family: FontAwesome !important }
Hiermit überschreiben wir die Standardschriftart für alle (deshalb “*”) Elemente und zur Sicherheit nochmal für alle Elemente im HTML-Body-Element mit der Benennung aus der “font-family”. Bitte darauf achten, dass diese Benennung vom Dateinamen abweichen kann.
Wichtig: Die Zeile mit “.fa” ist notwendig, damit die Icons (z. B. für den Warenkorb) weiterhin geladen werden.
Alternativ kann die Schriftart natürlich auch gezielt für einzelne HTML-Elemente wie Überschriften oder ähnliches eingesetzt werden:
h1, h2, h3, h4, h5 {font-family: 'futura-book';}
strong {font-family: 'helvetica-75bd';}