Log in

View Full Version : Resolved @font-face not working in Firefox 5


james438
07-27-2011, 06:01 PM
Hi,

I am using @font-face, which I am not very familiar with. I am using a font stored on my website and loading it into visitor's browsers if it is not found on their computer. I can get it to work with Opera and IE8, but not Firefox or Chrome. Here is the code I am using:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<head>
<style type="text/css" media="screen, print">
@font-face {
font-family: cool_font;
font-style: normal;
font-weight: normal;

local("/include/fonts/ImperatorSmallCapsBold.ttf");
src: url("http://www.animeviews.com/include/fonts/ImperatorSmallCapsBold.ttf");
src: url("http://www.animeviews.com/include/fonts/ImperatorSmallCapsBold.eot");
src: local("cool_font"), url("http://www.animeviews.com/include/fonts/ImperatorSmallCapsBold.ttf") format("opentype");
}
p.custom_font{
font-family: "cool_font";
font-size:52px;
}
</style>
<TITLE>
Editor 1.24</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</head><body>
<p class="custom_font">jgahskd</p>
</body></html>

What is frustrating is that I can't seem to get it to work in Firefox 5 at all. I have tried many different formats, but I can't get custom fonts to work in Firefox 5.
auntnini
07-27-2011, 11:27 PM
I just read and followed links at http://www.dynamicdrive.com/forums/showthread.php?t=63609'

I noticed you quoted p { font-family: cool_font; } whereas examples in link did not. http://www.howtoplaza.com/how-to-use-custom-fonts-on-your-website-with-css

Would it have something to do with CSS3 support?
james438
07-28-2011, 03:52 AM
Thanks for looking at it. I should have mentioned some of what I have tried.

I have tried many different combinations with single and double quotes and no quotes as well as absolute versus relative addresses. I've tried setting the format to truetype and opentype and leaving it out entirely. I tried .ttf vs .eot formats, but just can't seem to get Firefox 5 to recognize a font that is on my site.

The following thread has been most useful for me http://support.mozilla.com/en-US/questions/840707 (http://support.mozilla.com/en-US/questions/840707), but still no luck. I am probably misunderstanding something that they are saying. Try skipping to the end of the thread to see what I have been trying from the user cor-el.
james438
07-28-2011, 02:25 PM
I may be making a little progress. http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/ has a file that I can download and it allows me to use custom fonts in Firefox. It seemed like all other tips were not working. This one seems to work in Firefox, but not Opera. I will try and deconstruct it and post what I find later. It may be a little bit, because the rest of my week is rather busy.
james438
08-06-2011, 04:03 AM
kk, to the best of my knowledge the following is the solution:


<style type="text/css">
@font-face {
font-family: cool_font;
src: url("angelicwar-webfont.ttf");
src: url("angelicwar-webfont.eot");
src: local(cool_font), url("angelicwar-webfont.ttf");
}
p.custom_font{
font-family: cool_font;
font-size:52px;
}
</style>
<p class="custom_font">jgahskd</p>

From what I can tell quotes do not really matter for the name of the font unless there is a space involved. I used quotes for the location of the fonts. eot is used for internet explorer. The location of the font can be absolute or relative. The font format does not seem to need to be specified either.

So why wasn't the code in my first post working? Well, I tried recreating the code and used different fonts and was able to get it to work. It appears that a certain few fonts simply do not work in Firefox. I suspect that the problem lies with Firefox not recognizing fonts as well as other browsers and the fonts themselves being defective in some way.