Ask Experts Questions for FREE Help!
 

Free Answers in 3 Easy Steps

Register Now
3 Steps
 


Ask QuestionsprogressAnswer QuestionsprogressBuild ReputationprogressBecome an Expert
 
At Ask Me Help Desk you can ask questions in any topic and have them answered for free by our experts. To ask questions or participate in answering them you must register for a free account. By registering you will be able to:
  • Get free answers from experts in any of our 300+ topics.
  • Accept money for answers that you provide.
  • Communicate privately with other members (PM).
  • See fewer ads.
  View Answers    Answer this question    Ask a question  
 

FlDutchman
Jan 5, 2011, 03:55 AM
Hi there!

I have a problem with showing the new fontface under firefox.
I set up a new fontface for my blog and it works fine with chrome, opera and safari (i didn't try it with explorer 'cause it sucks).

The css code I use is like that:

@font-face {
font-family: 'DeliciousBold';
src: url('http://www.*****.com/fontface/delicious-bold-webfont.eot');
src: local(''), url('http://www.*****.com/fontface/delicious-bold-webfont.woff') format('woff'), url('http://www.*****.com/fontface/delicious-bold-webfont.ttf') format('truetype'), url('http://www.*****.com/fontface/delicious-bold-webfont.svg#webfont3jRkvl8J') format('svg');
font-weight: normal;
font-style: normal;
}
/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */


And


H1, h2, h3, h4, h5, h6 { font-family: "DeliciousBold", Arial, "MS Trebuchet", sans-serif, Verdana; color: #c0c0c0; letter-spacing: -1px; }



The web adress (www.*****.com) is NOT the adress of the blog. I can't upload it directly to the blog, because the '.eot' '.woff' and '.js' are forbidden.

So I think that's the reason that FF can't identify the font.

Any idea?

Big thanks!

angelicaflorine
Jan 29, 2011, 07:47 AM
@font-face {
font-family: DeliciousBold;
src: url('HTTP://URLTOFONT/delicious-bold-webfont.otf');
}

@font-face {
font-family: DeliciousBold;
src: url('HTTP://URLTOFONT/delicious-bold-webfont.otf');
}



Then, where you want to call the font:


H1, h2, h3, h4, h5, h6 { font-family: DeliciousBold, Arial, MS Trebuchet, sans-serif, Verdana; color: #c0c0c0; letter-spacing: -1px; }






Note: You have to make sure that you host the font on your own server. A lot of free font places have the font files, but remove them after 24 hours. Here are some more resources for you:


How to use the web fonts on a web page: http://www.css3.info/preview/web-fonts-with-font-face/

TTF to EOT converter: http://www.kirsle.net/wizards/ttf2eot.cgi


The converter will allow you to upload a TTF file and convert it to EOT file. It will also provide the new EOT file for download AND CSS code for your style sheet.

Hope this helps!