Font Javascript and CSS - is this correct?

[listerdl]

Hi - I use javascript to render font which works great.

However somtimes I notice that on some browsers it doesn't work and the end result is very ugly....this is rare but it does seem to happen.

In my CSS I have the following:

@font-face {
font-family: 'TitilliumMaps26L002';
src: local('../font/TitilliumMaps26L002-250wt') url('../font/TitilliumMaps26L002.otf') format('opentype');

Should the red font CSS code I highlighted be a direct path like the send line? The second line is direct but perhaps this is my problem that sometimes a browser just doesn't pick up the path to the correct font within the javascript?

Am I on the right track? Thanks!

[VIPStephan]

No, the font-family property only contains the font name you use later in your stylesheet to display the font, and as a matter of fact you can choose whatever name you like, i. e. you could also write:

font-family: 'My super crazy CSS font';
src: local('../font/TitilliumMaps26L002-250wt') url('../font/TitilliumMaps26L002.otf') format('opentype');

As long as you use that later on, like, for example:

h1 {font: normal 18px "My super crazy CSS font", Arial, Helvetica, Sans-serif;}

However, it could be that you suffer from the local reference issue explained, among other useful things, in this article by Paul Irish.
Besides, your local reference is wrong anyway since you should not specify a path there but also reference the font name itself. This is because if other people have the font installed they don’t necessarily have the font installed where you have. The local reference is there so the font is taken from the user’s local hard drive before it’s downloaded.

[listerdl]

thanks i really appreciate that -

Very good to know that basically my problem was that I was trying to force a path, i.e. ..../font/ which it seems was wrong and hence the issues I have been having. That is probably the answer!

Thanks again