cookie free subdomain and @font-face

Question

I've set up a cookie-free subdomain. In my css i use @font-face:

@font-face {
font-family: Butterfly Kids;
src:url(fonts/butterfly/Butterfly-Kids.ttf.woff) format('woff'),
    url(fonts/butterfly/Butterfly-Kids.ttf.svg#Butterfly-Kids) format('svg'),
    url(fonts/butterfly/Butterfly-Kids.ttf.eot),
    url(fonts/butterfly/Butterfly-Kids.ttf.eot?#iefix) format('embedded-opentype'); 
font-weight: normal;
font-style: normal;

}

But the font does not appear. I've tried to set the path like:

src(https://static.domain.com/fonts/butterfly/Butterfly-Kids.ttf.woff) format('woff'), etc.

This did't bring up the font either. Does anyone know how to set the path for @font-face with a cookie-free subdomain? Thanks for your interest. theo

Answer 1

@font-face does not require cookies (unless you choose to cache fonts to avoid server hits), and having a subdomain will make no difference either.

You may therefore have an issue with your URLs. Your paths in the first (multiple-line) example are relative to your css file; is your 'fonts' directory in the same directory as the css file? If not, that is your issue (or one issue).

Also, check your font file formats. All your fonts have 'ttf' (TrueType) as the first file extension, but they can't also be .eot (Embedded Open Type), .svg (Scalable Vector Graphics) and so forth: those are different file formats. Make sure all your font files are actually in the correct format.