0

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

|improve this question
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.

|improve this answer
  • Thanks for the message. Yes, the fonts folder is in the same directory as the style.css. So, it must be your third suggestion. I'll try to change that. – timholz Dec 31 '16 at 0:13
  • Check out CSS-Tricks: Using @font-face for some other helpful pointers on file formats. – iguanarama Dec 31 '16 at 0:18
  • I changed it to: src:url(fonts/butterfly/Butterfly-Kids.woff) format('woff'), etc. but the fonts won't show up. – timholz Dec 31 '16 at 0:20
  • What browser are you using? I notice you don't have a .ttf entry (format 'truetype') for some Safari, Android and iOS browsers. – iguanarama Dec 31 '16 at 0:23
  • And just to check: did you just duplicate a .ttf file before and give it different file extensions (.woff etc)? Because that won't work. :) They're different file formats. – iguanarama Dec 31 '16 at 0:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.