Elli,
As Philip Taylor has correctly pointed out, the URI you used in your
style sheet is a relative URI.
The CSS specification (http://www.w3.org/TR/CSS2/syndata.html#uri) has
this to say about relative URIs:
"For CSS style sheets, the base URI is that of the style sheet, not that
of the source document."
Therefore:
1. The style sheet in question is located at:
http://www.e7flux.com/e7flux2012/css/e7flux.css
2. The URL for the font is relative to that location.
3. url('fonts/creampuff.ttf') translates to the absolute URI:
http://www.e7flux.com/e7flux2012/css/fonts/creampuff.ttf
Solution:
Change
url('fonts/creampuff.ttf') to
url('../fonts/creampuff.ttf') or
url('http://www.e7flux.com/e7flux2012/fonts/creampuff.ttf')
and things should work. (Tested with Safari Devtools - works.)
For future projects you might also consider using a web font service
such as Fontsquirrel to avoid other web font-related issues.
Same thing goes for /sof/.
Hope this helps,
Jørgen
Am 04.01.12 21:30, schrieb Elli Vizcaino:
Ok so I tested on latest versions of Chrome, Opera, Safari for Windows,
IE9, IE8, IE7 and they are all rendering the font. It's in FF where I'm
having the problem. I tested in both FF3.6& 9 and what you see on those
versions of FF, is the fallback font (Brush Script STD) of the font stack. The
other browsers render "Creampuff" as it should. Please find link
below:
http://www.e7flux.com/e7flux2012/
are you sure you're referencing the proper location for your font? I
get Comic Sans in all browsers and when I look at the developer
console in Chrome I see this error:
Failed to load resource: the server responded with a status of 404
(Not Found) http://www.e7flux.com/e7flux2012/css/fonts/creampuff.ttf
The font is in its own directory. The link you provided places the the fonts
directory within the CSS directory. I don't know why it's a problem this time
around because the way I wrote my CSS code is exactly how I used it in another
project (http://www.e7flux.com/clients/sof/) and it works fine.
@font-face {
font-family: Creampuff;
src: url('fonts/creampuff.ttf') format('truetype');
font-weight: normal;
}
Elli
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
