@face-font CSS help needed, please...

[aich69]

I built my site using Segoe Print as the main font. This appears to be a default font for Windows 7 but not for XP so viewing my site via XP machine renders it with Tahoma...my first back up font in my CSS.

I read about @face-font and it appeared to be just what I needed and seems simple enough to implement...except, I cannot get it to work.

My CSS shows

@font-face { 
	    font-family: Segoe Print; 
	    src: url(../segoepr.ttf) format("truetype"); 
}

and I have the font sitting on the root of my site along with CSS page and my html pages.

Can anyone shed light on where I'm going wrong? I have tried changing the path in the above code to (segoepr.ttf) (/segoepr.ttf) but neither of these worked either.

Someone please show me how stupid I'm being. Thank you.

I used to have a handle on life... but it broke. Cpt. Red Bull

 

[darryncooke]

check out font squirrel they have a great tool for what you are doing.

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[aich69]

I took a look at that earlier and actually created one of their 'kits' but it still doesn't work..unless I'm missing something.
I have added the code directly to my existing CSS file. I'm wondering if maybe I should have 2 CSS files, one for the site layout etc and one for the @face-font code?

I used to have a handle on life... but it broke. Cpt. Red Bull

 

[darryncooke]

post your code. im not a mind reader.

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[Mike Lewis]

Sorry if this is stating the obvious, but are you sure the browser you are testing with supports format("truetype")? Even if the browser supports @font-face (which it probably does), it doesn't mean it supports all the relevant formats.

To quote from

http://sixrevisions.com/css/font-face-guide/

:

... the major browsers have decided to go their own way with font formats that they choose to support.

* Internet Explorer only supports EOT
* Mozilla browsers support OTF and TTF
* Safari and Opera support OTF, TTF and SVG
* Chrome supports TTF and SVG.

Further, mobile browsers like Safari on the iPad and iPhone require SVG.

I don't know how up to date that list is, but it might be worth checking.

Mike



__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro articles, tips, training, consultancy

 

[aich69]

Thanks Mike, you were bang on with that observation. I say 'were' as I managed to solve the problem last night by working with the font extensions you mention in your quote....it was just a bit late to post again

Darryn I went back to fontsquirrel and get myself straight with one of the kits, this is where the alternative font extensions came in.

All good now and rendering properley in IE, Safari, Firefox, Chrome.





I used to have a handle on life... but it broke. Cpt. Red Bull

 

[Mike Lewis]

Glad to hear you've got it sorted.

Mike

__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro articles, tips, training, consultancy

 

[aich69]

Cheers Mike.

I used to have a handle on life... but it broke. Cpt. Red Bull