Custom Font

Guten Tag,

ich habe in meinem Shopify Shop eine Custom Font “Brauer LL”.

Sie wurde so über den Benutzerdefinierten CSS Code eingefügt:

font-family: "Brauer LL", sans-serif !important;
font-weight: 400 !important;

In Chrome funktioniert es, in Safari und Firefox aber nicht.

Diese Font ist die regular font. In der base.css Datei ist dieser code eingefügt:

@font-face {
font-family: 'Brauer LL';
src: url('{{ "BrauerLL-Regular.woff2" | asset_url }}') format('woff2'),
url('{{ "BrauerLL-Regular.woff" | asset_url }}') format('woff'),
url('{{ "BrauerLL-Regular.ttf" | asset_url }}') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}

Und auch die Schriften sind im Assets Ordner eingefügt und heißen BrauerLL-Bold.woff2, BrauerLL-Bold.woff.

Wie kann ich es machen, dass die Font auch in Safari und Firefox verwendet wird? Weil es wird einfach immer nur eine sanf-serif font verwendet.

Probiere mal die Font-Family umbenennen auf BrauerLL (ohne Leerzeichen). Und sicherstellen, dass alle Gewichte (400, 700) per @font-face definiert sind.

font-family: 'BrauerLL', sans-serif !important;

Ich habe nun die Fonts über Medien - Inhalt eingfügt und dann den Link davon verwendet statt es über

asset_url

zu machen, das hat nun funktioniert.