Hey Y'all

just having some trouble with using @font-face im using a font called caviar dreams and I've tried to make it work just for a bit of fun but it aint working in firefox :/ ive included some screencaps of whats going on and the code as well. it works in safari fine but yeah, not good in firefox

Safari


FF


CSS

@charset "UTF-8";
/* CSS Document */

@font-face { 
    font-family: CaviarDreams; 
    src: local('CaviarDreams');
    local ('CaviarDreams');
    src: url('/font/CaviarDreams.ttf');
    format:('truetype');
    font-weight:normal;
}

p
    {
        font-family:CaviarDreams;
        font-size:5em;
    }

Try using Paul Irish's bulletproof @font-face syntax

still broken :/

I only have the TTF of the font, would this have an impact with FF?
I copied the code from the bulletproof syntax but that didnt work for me, any other ideas?

here's the CSS

@charset "UTF-8";
/* CSS Document */

@font-face {
  font-family: 'CaviarDreams';
  src: url('/font/CaviarDreams.eot?') format('eot'), 
  url('/font/CaviarDreams.woff') format('woff'), 
  url('/font/CaviarDreams.ttf')  format('truetype');
}
/*
@font-face { 
    font-family: CaviarDreams; 
    src: local('CaviarDreams');
    local ('CaviarDreams');
    src: url('/font/CaviarDreams.ttf');
    format:('truetype');
    font-weight:normal;
}*/

p
    {
        font-family:CaviarDreams;
        font-size:5em;
    }

ive been looking around on the mozilla site and it seems to be an issue with them

https://developer.mozilla.org/en/CSS/@font-face

i tried using their example and it still came up in times new roman so it looks like i'll be developing in another browser for a while

Odd.

Could it be perhaps your Firefox has some setting set to always use a certain font for font-face? Is Firefox updated to at least 4+?

I know in IE you can set a custom fallback stylesheet. Maybe your Firefox is doing something similar. If all else fails, try installing the font into your operating system's font files, and then check if it works.

Use fontsquirrel.com/fontface/generator to generate the correct font-face css.

Originally Posted by Physicsguy

Odd.

Could it be perhaps your Firefox has some setting set to always use a certain font for font-face? Is Firefox updated to at least 4+?

I know in IE you can set a custom fallback stylesheet. Maybe your Firefox is doing something similar. If all else fails, try installing the font into your operating system's font files, and then check if it works.

I'm using FF5 and I do have the font installed locally, I've been reading around the mozilla support site and it seems to be a problem with FF rather than any local development. Some people think that it works when the site is not being hosted locally but I am yet to try this

...and now its working

What was the problem? Was it as simple as moving to a live server?

nah apparently FF doesnt read TTF fonts which is why when i tried a different font it worked, i then used font squirrel to get eot and otf files of the font and now it works fine.

thanks for everyone's suggestions

see the page here

(yes i know some of the images are stretched)

Thanks Nick. Good to know.

Hey some of your images are stretched. Sorry, couldn't resist. Looks like the font is working.

Why would you want to use a font that most of your visitors won't have on their computers?

Done correctly, with this method visitors don't have to have the typeface on their computers for it to display.

tim

Exactly the idea is you're referencing a font file online that gets downloaded to the visitors browser.

I'm surprised the method has not been used earlier, since individual fonts are pretty lightweight files.

tim

Part of the problem was the technology wasn't as capable and part was the typeface designers prefer not to see their hard work freely distributed since they do sell fonts for a living.

hey team, so its working on FF5 and Safari (whatever version apple has updated me to) on my macbook running osx 10.5.8 but when I try to view the site (http://www.test.nickphayden.com) on other computers (at TAFE/Uni/Home so far) its giving me the browsers default fonts, I'm going in today to check what version of FF and IE they are running but if they're running FF5 (I think they are) then why wouldn't it be working there?

can some of you guys just check out the link and let me know what you guys see

The default font is showing up in FF5, Opera 10, and Safari 4 for windows (well, and IE7, but that's a given). And your email and FB links are hovering over your footer text. Oh, and some of your images are stretched (duck).

tim

so at TAFE they're using FF 3.6 and I'm getting the default font :/
does anyone know about the support for font-face in 3.6? I had a quick google and it mostly said that they were moving to support WOFF.

with the other issues would using a CSS reset (and recoding) fix the issue?