PDA

View Full Version : Special font on a blog


FlDutchman
Jan 5, 2011, 04: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 address (www.*****.com) is NOT the address 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, 08: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!