Fonts laden?

[jackie05]

Hallo,
ich habe ein Problem und zwar habe ich einige Fonts, diese ich gerne verwenden möchte.
Das Problem ist, das die Fonts am Windowsrechner funktionieren, aber nicht immer korrekt mit einem Smartphone.
Deshalb möchte ich jetzt mal wissen, wie man die Fonts ambesten auf seiner eigenen Seite laden kann.
Ich hab das z.B. so mit CSS gelößt:

@font-face {font-family: "Comic Sans MS";
    src: url("fonts/comic-sans-ms.eot");
    src: url("fonts/comic-sans-ms.eot?#iefix") format("embedded-opentype"),
    url("fonts/comic-sans-ms.woff2") format("woff2"),
    url("fonts/comic-sans-ms.woff") format("woff"),
    url("fonts/comic-sans-ms.ttf") format("truetype"),
    url("fonts/comic-sans-ms.svg#Comic Sans MS") format("svg");
}

Aber das klappt nicht immer beim Smartphone, also die Schrift fehlt einfach und wird mit dem Standard Font vom Smartphone ersetzt.

Könnte man die Fonts eventuell mit JavaScript laden und anschließend eine Funktion aufrufen, wenn alle Fonts geladen sind?
Ich benutze auf meiner Seite eine Font auswahl und möchte weit über 200 Fonts laden.
Im anhang habe ich ein Screen hochgeladen, wie die Font auswahl aussieht, darin werden noch einige Fonts erscheinen, aber dazu muss ich die Font Dateien erstmal alle laden.

Ich bedanke mich schonmal im Voraus.

Gruss

 

[SpiceLab]

https://github.com/typekit/webfontloader - ohne Garantie, dass sich dadurch auf dem Smartphone etwas ändert.

 

[jackie05]

Danke erstmal.

Das funktioniert auch nicht, weder auf Windowsrechner noch auf Smartphone.
Ich möchte spezielle Fonts laden, einige Fonts sind Standardmäßig nicht verfügbar, deshalb muss ich die Fonts erst laden, nur wie mache ich das am besten?

Gruss

 

[SpiceLab]

Das Problem ist, das die Fonts am Windowsrechner funktionieren, aber nicht immer korrekt mit einem Smartphone. Deshalb möchte ich jetzt mal wissen, wie man die Fonts ambesten auf seiner eigenen Seite laden kann.

Wenn es sich nicht um Webfonts von Drittanbietern wie Google handelt, die auf anderem Wege im HTML-Dokument eingebunden werden als selbst-gehostete (siehe https://developers.google.com/fonts/docs/getting_started#a_quick_example), reicht dafür CSS mit @font-face vollkommen aus.

Mit Hilfe von JS die Fonts zu laden, bietet mehr Komfort, ist aber nicht dabei behilflich, mögliche Darstellungsprobleme bei diversen Devices und Clients wegen unterschiedlicher Kompatibilität zu fixen.

Das funktioniert auch nicht, weder auf Windowsrechner noch auf Smartphone.

Wenn jetzt selbst auf dem PC die Fonts nicht mehr geladen/dargestellt werden, lässt das aus der Ferne erstmal nur die Vermutung zu, dass Dir bei der praktischen Umsetzung ein Fehler unterlaufen ist.

Oder hab ich was mißverstanden, und es funktioniert jetzt etwas anderes nicht mehr?

Besser verweist Du an dieser Stelle auf Deine Seite in beiden Fassungen (ohne/mit "Webfontloader"-Script), damit man die Gelegenheit bekommt, nach deren Fehlerquellen zu schauen, sowie das Ganze auch mal mit dem eigenen Smartphone testen zu können, was da aus der Font-Liste ankommt, und was nicht.

Vielleicht ergeben sich da ja auch Unterschiede von Modell/Browser zu Modell/Browser.

Ich bin mit "SamsungGalaxyNote/Chrome" mobil. Und Du?

Mit weiteren mutmaßlichen spekulativen Aussagen dürftest Du Dich nicht zufriedengeben wollen.

Ich benutze auf meiner Seite eine Font auswahl und möchte weit über 200 Fonts laden.

Du hast Dir offensichtlich im Vorfeld keine Gedanken darüber gemacht, wieviel MB Datenvolumen bei 200+ Fonts anfallen, die der Browser beim Seitenaufruf zunächst herunterladen darf.

Wieviel genau, keine Ahnung, aber auf jeden Fall zweistellig - bei 200 Webfont-Kits mit geschätzten durchschnittlichen 0.2 bis 0.3 MB ergibt das "schlappe" 40 bis 60 MB!

Bedenke: die wenigsten mobilen Besucher verfügen über eine Internet-Flatrate mit unbegrenztem Datenkontingent, und die Download-Zeit könnte sich je nach Verbindungsart/-qualität in die Länge ziehen, sodass der eine oder andere Ungeduldige die Seite verlässt, bevor sie ihm überhaupt präsentiert wird.

 

[jackie05]

Vielen Dank für die antwort.

Du hast Dir offensichtlich im Vorfeld keine Gedanken darüber gemacht, wieviel MB Datenvolumen bei 200+ Fonts anfallen, die der Browser beim Seitenaufruf zunächst herunterladen darf.

Klar habe ich mir darüber schon gedanken gemacht, aber ich habe ja selbst so eine ähliche Fontliste gesehn, auch mit über 200 verschiedenen Fonts, diese auch mit meinem Smartphone Samsung Galaxy S6 funktioniert.

Wenn das so ist, dann muss ich mir was anderes einfallen lassen.

Gruss

 

[SpiceLab]

ich habe ja selbst so eine ähliche Fontliste gesehn, auch mit über 200 verschiedenen Fonts, diese auch mit meinem Smartphone Samsung Galaxy S6 funktioniert.

Kannst Du diese Seite bitte mal verlinken?

Wenn das so ist, dann muss ich mir was anderes einfallen lassen.

Wie gesagt, ein Link zu Deiner Seite (gerne auch ohne "Webfontloader"-Script) wäre sehr hilfreich, um zu den tatsächlichen Ursachen und den möglichen Gegenmaßnahmen überhaupt was sagen zu können.

 

[SpiceLab]

Wie gesagt, ein Link zu Deiner Seite (gerne auch ohne "Webfontloader"-Script) wäre sehr hilfreich, um zu den tatsächlichen Ursachen und den möglichen Gegenmaßnahmen überhaupt was sagen zu können.

Es ist ja gut möglich, dass es sogar außerhalb Deiner Entwicklungsumgebung auf anderen Desktop-PCs auch Probleme damit gibt, von denen Du bislang noch nichts bemerkt hast.

 

[jackie05]

z.B. bei Ebay "Aufkleber selbst gestalten" dort befindet sich auch eine Fontauswahl mit ca. 200 Fonts, die dargestellt werden.
eBay-Artikelnummer: 121845869899

Momentan wird der Inhalt Artikelbeschreibung nicht korrekt angezeigt, keine ahnung was da los ist.

Gruss

 

[SpiceLab]

z.B. bei Ebay "Aufkleber selbst gestalten" dort befindet sich auch eine Fontauswahl mit ca. 200 Fonts, die dargestellt werden.
eBay-Artikelnummer: 121845869899

Momentan wird der Inhalt Artikelbeschreibung nicht korrekt angezeigt, keine ahnung was da los ist.

Keine Ahnung, wo Du dort bei Artikel-Nr. 121845869899 (http://www.ebay.de/itm/WUNSCHTEXT-A...869899?hash=item1c5e946d4b:g:pA4AAOSw0vBUg2xE) ~200 Fonts zur Auswahl siehst?!

Im Quellcode der Seite findet sich diesbezüglich auch rein garnichts.

Vielleicht handelte es sich dabei auch nur lediglich um eine/mehrere Grafik/en.

 

[jackie05]

Grafiken sind es definitiv nicht, da ich mir den HTML Code schon angesehen habe "z.B. im Opera-Browser rechte Mausklickt ->Element untersuchen" und bei jeder Eingabe wird die Fontliste aktualisiert zur vorschau des eingegebenen Textes.
Die Fontliste hat 2 Funktionen, die umgeschaltet werden können, einmal Fontname und einmal den Text, den man eingegeben hat zur vorschau.

Bei Ebay fehlt momentan die Schriftgestaltung in der Beschreibung, keine ahnung wieso das jetzt nicht geladen wird, Vielleicht geht es demnächst wieder.
Sobald es wieder funktioniert, dann werde ich mal ein Screen erstellen.

Gruss