Member Avatar for PChuprina

Hello all,

To my dismay i discovered my @font-face font is not working on the Safari mobile browser. I downloaded the font package from Fontsquirrel and yes it does have the font in its svg version. Here is the CSScode:

/* Generated by Font Squirrel ([url]) on April 20, 2010 05:06:32 PM America/New_York */
@font-face {
    font-family: 'ChopinScriptRegular';
    src: url('../fonts/ChopinScript-webfont.eot');
    src: local('☺'), url('../fonts/ChopinScript-webfont.woff') format('woff'), url('../fonts/ChopinScript-webfont.ttf') format('truetype'), url('ChopinScript-webfont.svg#webfont3FgKTvnt') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
div#navbar ul {
    /*border:  solid red 1px;*/
    width:  720px;
    margin: 0px auto;
    padding: 0px;
    font-family: ChopinScriptRegular, Arial, Helvetica;
    font-size:  170%;
    color: #2a0050;
    line-height: 37px;
    white-space: nowrap;
}

Have I missed something? Does Safari mobile have a issue with the font-height being in"%?"

  • 4 Contributors
  • 6 Replies
  • 629 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by Member #360561

Dani AI

Generated

Short summary and the most likely fix for ’s report: desktop browsers are picking up the WOFF/TTF files, but Mobile Safari (especially older iOS versions) will fall back to the SVG font — and in the CSS you posted the SVG URL is incorrect (it doesn’t use the same ../fonts/ path you used for the other files). Mobile Safari historically required the SVG file for @font-face on older iOS builds (TrueType/WOFF support came later), so a missing or wrong SVG URL will make it work on desktop but fail on iPhone/iPad. (smashingmagazine.com)

Concrete checks and quick fixes: open the generated .svg in a text editor and confirm the <font id="..."> value; the fragment after the hash in your CSS URL must match that id exactly. Also make the SVG URL identical in path to your other font files (or use an absolute URL) — iOS is picky about the path. If the fragment or path is wrong the device simply won’t load the font, even though desktop Safari/Chrome do. (stackoverflow.com)

Server-side things to verify if the SVG is correct but it still fails: ensure the font files are served from the same origin or that the server sends Access-Control-Allow-Origin for font assets; also confirm the server is returning sensible font MIME types (svg → image/svg+xml, woff → font/woff, ttf → font/ttf). These two issues commonly block fonts on some browsers. (developer.mozilla.org)

A couple of practical notes tied back to the thread: ’s desktop test and ’s offer to test on an iPad are useful — start by fixing the SVG path/fragment and re-test on a real device. If problems persist, paste a tiny test page (fonts + minimal CSS) on the same host so others can debug; include the exact SVG <font id> and the font URL you’re using. Also keep in mind mobile WebKit historically hides text until the webfont downloads, so test with small files or local copies to reduce that effect. (web.dev)

Recommended Answers

All 6 Replies

Member Avatar for kidwon

I've tested in a pc and the font is working just fine!
See it here
Try it with Ipad/Iphone safari and come back with update on this matter.

Member Avatar for Dani

I believe that's what his complaint is. That it works fine on desktops but not on mobile browsers.

Member Avatar for PChuprina

@cscgal Thank you, you are right, that is my concern. It does not work on the Safari mobile browser for the Ipad and Iphone. I also have the issue of not having access to a Iphone or Ipad to test except at a Apple store......

Member Avatar for Dani

I have an iPad but unfortunately I left it in my car today. I'll try to remember to check when I leave work.

Member Avatar for PChuprina

left it in your car? Oh my.....

I'm going to set up a test site with this particular code tomorrow am. Can i give you the adress tomorrow? Been a frustrating day.

Thanks for all your help

Patrick Chuprina

Member Avatar for Member #360561

I'm trying this code because Windows systems do not
have these fonts:

CSS file:

@font-face {
	font-family: Ubuntu-Title;
	src: url (/c/fonts/Ubuntu-Title.ttf);
}
and
.logotext {
	float:left;
	color:#00b030;
	font-size:120%;
	font-weight:bold;
	line-height:1;
	padding:1.5em 0 0 1em;
	font-family:Ubuntu-Title, LMSansQuotation8, Tahoma, Arial, sans-serif;
	text-shadow:.06em .06em .06em #050;
}

The LMSans.... font is used, the Ubuntu font is ignored.
I have even installed the Ubuntu font, but I'm
not 100% sure it works for Apache. It works for Write.

I'm running Ubuntu 9.10 with LAMP server and FireFox 3.6.12.
It's the same in Safari and Opera (Well, very little works
with Opera, so we can forget that anyway! :) )

(NOT tried from Windows yet, because then I have to upload it
to the web server and it's not ready for that yet).

I have tried with and without quotes around the filename.
No difference. The path is correct.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.