Results 1 to 5 of 5

Thread: @font-face not working in Firefox 5

  1. #1
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    2,242
    Thanks
    96
    Thanked 103 Times in 101 Posts

    Default @font-face not working in Firefox 5

    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:

    Code:
    <!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.
    Last edited by james438; 08-06-2011 at 04:03 AM.
    To choose the lesser of two evils is still to choose evil. My personal site

  2. #2
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default "cool_font" ?

    I just read and followed links at http://www.dynamicdrive.com/forums/s...ad.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...bsite-with-css

    Would it have something to do with CSS3 support?
    Last edited by auntnini; 07-27-2011 at 11:29 PM. Reason: add link

  3. #3
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    2,242
    Thanks
    96
    Thanked 103 Times in 101 Posts

    Default

    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, 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.
    To choose the lesser of two evils is still to choose evil. My personal site

  4. #4
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    2,242
    Thanks
    96
    Thanked 103 Times in 101 Posts

    Default

    I may be making a little progress. http://blog.themeforest.net/tutorial...-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.
    To choose the lesser of two evils is still to choose evil. My personal site

  5. #5
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    2,242
    Thanks
    96
    Thanked 103 Times in 101 Posts

    Default

    kk, to the best of my knowledge the following is the solution:

    Code:
    <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.
    To choose the lesser of two evils is still to choose evil. My personal site

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •