Why does iPad not use my font in web?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Why does iPad not use my font in web?

Post by simonmlewis »

Code: Select all

@font-face {
	font-family: 'SegoeUIWF';
	src: local("Segoe UI"), 
		url('/source/segoeui-webfont.eot');
}
@font-face {
	font-family: 'SegoeUIWF'; 
		url('/source/segoeui-webfont.ttf') format('truetype'),
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'SegoeUILightWF';
	src: local("Segoe UI Light"), 
		url('/source/segoeuil-webfont.eot');
}
I have this in my style sheet, and the files are uploaded. Yet iPad doesn't use them and reverts to my secondary font, arial all the time.

Can iPad not show Segoe?
I was trying to find a copy of Helvetica Light, that Apple uses, but cannot trace it.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
techkid
Forum Commoner
Posts: 54
Joined: Sat Sep 05, 2009 11:18 pm
Location: Maldives

Re: Why does iPad not use my font in web?

Post by techkid »

simonmlewis wrote:

Code: Select all

@font-face {
	font-family: 'SegoeUIWF';
	src: local("Segoe UI"), 
		url('/source/segoeui-webfont.eot');
}
@font-face {
	font-family: 'SegoeUIWF'; 
		url('/source/segoeui-webfont.ttf') format('truetype'),
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'SegoeUILightWF';
	src: local("Segoe UI Light"), 
		url('/source/segoeuil-webfont.eot');
}
I have this in my style sheet, and the files are uploaded. Yet iPad doesn't use them and reverts to my secondary font, arial all the time.

Can iPad not show Segoe?
I was trying to find a copy of Helvetica Light, that Apple uses, but cannot trace it.
I am not sure, but could be that you are using only eot fonts. I am not sure If iPad supports eot. Perhaps you can do a test on Chrome, and see If it works. If it works on Chrome, It is definitely a compatibility problem in Safari.

You should add more font types to ensure compatibility between cross platforms and browsers. Add otf, ttf and svg format as well. As far as I am concerned ttf works on iOS and Safari.

Code: Select all

@font-face {
	font-family: 'SegoeUIWF';
	src: local("Segoe UI"), 
                url('/source/segoeui-webfont.otf') format('opentype'),
                url('/source/segoeui-webfont.svg#SegoeUIWF) format('svg');
		url('/source/segoeui-webfont.eot');
}
Post Reply