Schriftart wird im Browser nicht richtig angezeitg
Auteur : Patrik W.Guten Tag
Ich habe folgendes Problem.
Aktuell bin ich an der Erstellung einer neuen Vereinshomepage für unsere Bigband.
Sie ist noch im Prototypenstadium jedoch bin ich auf ein Problem gestossen das für mich recht rätselhaft ist.
Ich wollte bei den Textstilen die Schriftart "Poppins Light" einfügen in dem ich mir die notwendige Datei vom Internet heruntergeladen habe und so importiert habe (als Online Web-Font ) . Soweit hat alles funktioniert und auch in der Website X5 Vorschau wird alles richtig angezeigt. Leider sieht alles ganz anders aus wen ich es auf den Server hoch Lade.
Nach dem Hochladen wird mir alles in Arial angezeigt.
Habe ich da was falsch gemacht?
Müsste ich im Fenster Web-Fonts Hinzufügen im unteren Bereich unter "Code @import:" auch etwas eintragen oder reicht es einfach die Datei zu importieren?
Sollte ich da noch was eintragen müssen, was wäre das?
Kann mir da jemand helfen?
Die Homepage ist aktuell unter test.green-apple.ch zu finden und wie gesagt noch nicht fertig (vor allem die Bilder sind momentan erst als Platzhalter anzusehen).
Besten Dank.
Möglicherweise ist der Font nicht korrekt hochgeladen worden. Es kann sein, dass man ein zweites mal hochladen muss bis der Font sich aktiviert. Am besten STRG+Vorschau drücken und nochmals hochladen. WEnn das auch nicht hilft, dann binde es mit Google Fonts ein. Ist glaube ich ein Google Font oder eben mit der code@import ! Normalerweise stellt der Fonthersteller so einen Code zur Verfügung.
Versuche doch die Schrift offline einzubinden.
Hier z.B. https://www.fontsquirrel.com/fonts/poppins
In der Zip-Datei nimmst Du die "Poppins-Light" (als OTF-Datei) und ladest diese auf https://font-converter.net/de rauf. Hier wird die OTF-Datei in die benötigten Schriftdateien umgewandelt.
In Website wählst Du nun beim Textstil "WEB-Font" und "Offline-WEB-Font" aus. Wähle den Ordner wo die Poppins-Light Schrift liegt aus (zuvor entpacken) und Du kannst die Schrift-Dateien TTF, WOFF, SVG und EOT in Website hinzufügen.
Hier die Schrift als Anlage