Die Verwendung spezieller Schriften mit CSS @font-face funktioniert ja gut. Hinterlegt man alle benötigten Font-Formate für die wichtigsten Browser inkl. .svg für die mobilen Browser-Varianten scheint alles zu klappen. Auch das iPad zeigt die korrekte Schrift. Jedoch fehlen hier plötzlich die Umlaute und Sonderzeichen. Liegt das nun an einer fehlerhaften svg-Schrift oder muss man hier noch andere Dinge berücksichtigen? Hat jemand da Erfahrungen und ein Tipp für mich?

Hallo Sacha,

>> Liegt das nun an einer fehlerhaften svg-Schrift
Das kann sein.

Oder das iPad weigert sich einfach die Umlaute darzustellen.
Oder es liegt daran, daß es noch keine endgültige CSS-Spezifikation für das einbinden von SVG-Fonts gibt.

Ist das nur auf iPad so, oder auch in Safari auf Mac OS X?

Welches Encoding wird im HTML benutzt?

Olaf

Hallo,
ich sehe zufällig das gleiche Problem bei einer älteren Testseite von mir, ohne dass ich da bisher groß eingestiegen bin:
http://www.drossmedia.com/kunden/kramer_marixverlag/

Dort habe ich einen Frutiger-Klon mit @font-face eingebettet.

Aus Design-Gründen habe ich in der Headline einen schrägen Bruchstrich statt Schrägstrich gesetzt.

Antwort auf [ olaflist ]

Ist das nur auf iPad so, oder auch in Safari auf Mac OS X?

In Desktop-Safari wird er angezeigt, wobei dort aus dem @font-face-Kit ja nicht zwingend auf .svg zugegriffen werden muss – in iOS nicht.

Antwort auf [ olaflist ]

Welches Encoding wird im HTML benutzt?

charset=utf-8 wird dort benutzt.

Ob Umlaute betroffen wären, muss ich mal ausprobieren. Da es bei mir nur dieses schlichte Einzelzeichen ist, könnte ich einfach als Inline-Style eine Systemschrift dafür nehmen.

Grundsätzlich bin ich an der Problemstellung auch sehr interessiert. iPhone und iPad-Inhalte sehen eigentlich z.Z. immernoch am besten in Helvetica aus, aber ich wollte beim nächsten Projekt dort eigenlich auch mal @font-face einsetzen.

Antwort auf [ sascha.bucher ]

Hat jemand da Erfahrungen und ein Tipp für mich?

Was auf jeden Fall auf meinem iPod touch – und damit allerhöchstwahrscheinlich auch auf dem iPad – mit Umlauten geht, ist @font-face über die Google Font Directory (kostenlos) oder über kommerzielle Dienste wie fonts.com. Wäre ja auch schlimm, wenn nicht.

Zu beidem gibt es Beispiele und Kommentare auf meiner Blog-Seite:

Google meint dazu, Zitat:
The Google Font API is not currently supported on iPhone, iPad, iPod, or Android.
http://code.google.com/...is/webfonts/faq.html

Hat jemand schon mal mit fontsquirrel Fonts passend gemacht für iPad & Co.?

Olaf

Hallo Sabine,
ich kann nur sagen, dass das Beispiel bei mir auf dem iPod touch geht (mit Umlauten), auch wenn Google dafür gar keine Garantie übernimmt.

-- So, ich habe jetzt auf meiner Testseite "Frankfurtbuecher" (Fonts bei mir lokal eingebettet mit einem @font-face Kit von fontsquirrel.com) auch mal ein paar Umlaute in die Headlines eingebaut und es geht auch!

charset=utf-8 ist also OK.

Den schrägen Bruchstrich (& frsl ;)bekomme ich aber nicht in den Griff, den gibt's anscheinend nicht mal in der Systemschrift Verdana.

Sascha, um welche Type geht es denn bei Dir? Wenn Du auch lokal einbettest, kannst Du es ja legal nur mit Freefonts machen, bei denen es ausdrücklich zugelassen ist. Da hast aber in Einzelfällen immernoch das Phänomen, dass deutsche Umlaute prinzipiell gar nicht da sind, da der Font irgendwo auf der Welt als Appetithäppchen entstanden ist.

Hallo alle zusammen

Da hat sich ja einige über Nacht getan. Nun ich verwende ebenfalls UTF-8 und die Schrift ist von Font-Squirrel (Titillium) also eine kostenlose Schrift die gleich in allen benötigten Formaten zur Verfügung gestellt wird.

Die Zeichen fehlen im Safari auf einem Macintosh nicht. Aber was hier auch schon ein Anzeichen dafür ist, dass etwas nicht ganz sauber funktioniert ist: die Umlaute passen nicht zur Schrift, es schein so als ob diese in einer anderen Schrift dargestellt werden (siehe Bild).

Also liegt es wohl doch an der Schrift. Bei nächster Gelegenheit teste ich mal ein ein paar andere Schriften von Font-Squirrel mit dem iPad.

wie kommen die Umlaute denn rüber, wenn Du die Schrift direkt auf dem Rechner verwendest (also zB in TextEdit)?

Olaf

Hallo Sacha,

Hier gibt es ein Codebeispiel von Apple:
http://developer.apple.com/.../cssEffectsPart1.zip

Vielleicht kannst Du mal damit testen, ob die Umlaute sichtbar sind.

Den enthaltetenen Font habe ich mit dem Validator geprüft:
http://validator.w3.org/
"Validate by Direct Input"
Das Ergebnis ist, daß der SVG-Code valide ist.

Im Quellcode der SVG-Datei steht:
This is a custom SVG webfont generated by Font Squirrel.

Validiere mal Deinen Font.
Leider konnte ich bei Apple noch keine Spezifikation finden,
die beschreibt welche SVG-Version für die Schriften verwendet werden soll.

Noch ein Beispiel zum Testen:
http://www.apple.com/...showcase/typography/

Hallo Sascha,
ich kann Dir bestätigen, dass es bei der Titilium Probleme mit den Umlauten und dem ß gibt, und zwar auch mit Desktop-Safari und .otf-Fonts. Aus meiner Sicht also kein .svg/iOS-Problem.

Eventuell kannst Du mal gucken, ob schon neuere Versionen da sind
http://www.campivisivi.net/titillium/download.html

Ob fontsquirrel.com mit den @font-face Kits (.incl .svg) auch immer nachziehen wird, ist natürlich noch schwieriger zu sehen.

Ich mag diese Schrift auch sehr gerne, aber wie schon erwähnt kann man bei Freefonts die Erwartungen nicht in allen Details so hoch ansetzen.

Hallo Olaf,
normal muss man da gar nichts passend machen. Bei anderen Fonts funktioniert es mit .svg und iOS. Oder meinst Du, mit @font-face Generator eigene Kits erstellen? Das habe ich noch nicht probiert, weil man sich da schnell im Illegalen bewegt, wenn man die Type nicht selber gezeichnet hat.

Hallo Sabine,
danke für die Links.

Viele Grüße
Michael

Antwort auf [ wundertype.de ]

Oder meinst Du, mit @font-face Generator eigene Kits erstellen? Das habe ich noch nicht probiert, weil man sich da schnell im Illegalen bewegt, wenn man die Type nicht selber gezeichnet hat.

Wir sind ja im Moment noch beim Aufspüren der Ursache für das Problem - für Testzwecke würde ich da nicht zögern, auch Fontsquilrel einzusetzen.

Wenn das zB helfen würde, würde ich anschließend schauen, wie ich eine entsprechende Schriftverwendung auf legale Weise durchführen kann.


Olaf

Erste einmal Danke für all die Tipps.

Ich habe nun die Ursache für das Problem gefunden. Anscheinend war es doch nicht das komplette Glyph-Set beim Export. Zur Sicherheit habe ich diese Funktion nun unter Font-Squirrel deaktiviert. Die Schriftschnitte werden dann zwar 120kB anstelle von 25kB, dafür scheint es nun überall zu funktionieren.

Da ich so oder so auch die «…» Anführungen usw. verwenden möchte, bin ich so auf der sicheren Seite. Schliesslich weiss man ja nicht welche Zeichen bei "Western Languages" oder bei "English" usw. enthalten sind.