Iphone wont show Lucida Sans

Question

Font display differs

link is :

http://www.woolovers.com/silk-cotton/womens/sleeveless-silk-cotton-camisole.aspx

Left is iPhone display and right is PC. The fonts circled are having same css but have different display. A(pc)=B(pc) but A!=B. Any ideas?

I am sorry i just asked the dev team and it is only our networks ip that can see the site. — AspiringCanadian, Dec 07 '12 at 14:12

score 2 · Accepted Answer · answered Dec 07 '12 at 12:44

2

As Jukka has said it is not a supported font on iOS so you have three options.

Choose a different font which is available on ALL (iOS, Android, MacOS, Windows etc.) platforms.
Host the font file on your web server and point to it with CSS @font-face.
Use an online font hosting service such as Google Webfonts

To point to a custom font with CSS use the code below and copy the Lucida Sans font file to your web server.

@font-face{
font-family: "Lucida Sans"; src:url('LucidaSans.ttf');
}

Note: Google Web Fonts does not have Lucida Sans available.

answered Dec 07 '12 at 12:44

ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

2,754
1
26
39

I have used font-face and yet only that particular font wont show. Well i guess its useless now as i asked the dev team and nobody except a person on our network can see that page. I will repost once the issue remains unsolved and is implemented on the live site. – AspiringCanadian Dec 07 '12 at 14:15
1

Ok, I assume you're using the native Safari web broswer? If so it would appear it does not support @web-fonts correctly. However there is a work around which I found here on SO. Here's the link. Give it a go and let me know if it works... http://stackoverflow.com/questions/4412511/font-face-not-embedding-on-mobile-safari-iphone-ipad – ᴍᴀᴛᴛ ʙᴀᴋᴇʀ Dec 10 '12 at 10:41
Yes the browser in iPhone itself. I already have used the bulletproof method and i tried separating the font-face (eot line) as suggested but both solutions didn't work. See this screenshot : http://i48.tinypic.com/50it6q.png. Wierdly the problem is that same css is behaving differently i.e. giving different font sizes. Let me know if you get what i am trying to say here. – AspiringCanadian Dec 10 '12 at 11:20
1

Ah yes. Mobile devices have a tendency to 'boost' font sizes. Check out the **-webkit-text-size-adjust** CSS property. Setting to to 100% should do the trick. `-webkit-text-size-adjust: 100%;`. Apple have some information about webkit-text-size-adjust on their developer page: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-text-size-adjust. – ᴍᴀᴛᴛ ʙᴀᴋᴇʀ Dec 10 '12 at 11:25
You hit the nail on its head there man! Thank you so very much. Client was getting furious! **sigh in relief** – AspiringCanadian Dec 10 '12 at 11:32
Great! Pleased to have helped Harmeet. Don't forget to mark this post as the correct answer (so others can benefit). – ᴍᴀᴛᴛ ʙᴀᴋᴇʀ Dec 10 '12 at 11:46

score 1 · Answer 2 · edited May 23 '17 at 12:29

1

It seems that iPhone just hasn’t got a font named Lucida Sans and therefore uses another font. Cf. to What fonts do iPhone applications support?

edited May 23 '17 at 12:29

Community

1
1

answered Dec 07 '12 at 12:34

Jukka K. Korpela

195,524
37
270
390

score 0 · Answer 3 · answered Dec 10 '12 at 08:42

0

My computer doesn't show the text using Lucisa Sans either, because the version of the font that I have is named Lucida Sans Unicode. All computers doesn't have a font named Helvetica either.

You should use a font stack will fallbacks all the way to the default font sans-serif defined in CSS. That way you know that one of the fonts specified will always be used, and it won't fall back to something completely different:

font-family: Lucida Sans, Lucida Sans Unicode, Helvetica, Arial, sans-serif;

answered Dec 10 '12 at 08:42

Guffa

687,336
108
737
1,005

I have the following css actually on the development site : font-family:Lucida Sans,Lucida Grande,Lucida Sans Unicode, lucida_sansregular. Where "lucida_sansregular" is coming through @font-face and yet it wont display lucida font only on that piece of text. – AspiringCanadian Dec 10 '12 at 08:48

score 0 · Answer 4 · answered Aug 22 '22 at 15:12

See https://developer.mozilla.org/en-US/docs/Web/CSS/font-family:

You should always include at least one generic family name in a font-family list, since there's no guarantee that any given font is available. This lets the browser select an acceptable fallback font when necessary.

I went with the following fallback fonts:

font-family: "Lucida Sans","Helvetica Neue",Helvetica,Arial,sans-serif;

Iphone wont show Lucida Sans

4 Answers4