@font-face fine on Firefox 3.6, but messed up layout on Firefox 5

Hi all,
I've been testing a wordpress website that I design using Firefox 3.6. I used the @font-face code in my style.css file and it worked just fine. However, when I upgraded to Firefox 5 just now, the layout was all messed up, just because of that font-face code. It seems like it "disables" all the CSS and therefore the layout looks really bad (like it has no CSS defined at all).
Here is how it supposed to look like (WITHOUT the font face code):
http://i213.photobucket.com/albums/cc134/ifgfdallas/Web%20Stuffs/without_fontface.jpg
You can also view it live: http://www.ifgfdallas.org
Now, here is how it looks like, all messed-up, when I put the font-face code:
http://i213.photobucket.com/albums/cc134/ifgfdallas/Web%20Stuffs/with_fontface.jpg
Anyone has any clues?

Try posting at the Web Development / Standards Evangelism forum at MozillaZine. The helpers over there are more knowledgeable about web page development issues with Firefox. <br />
http://forums.mozillazine.org/viewforum.php?f=25 <br />
You'll need to register and login to be able to post in that forum.

Similar Messages

  • Why does the @font-face work in a Private Tab, but not in a normal Tab?

    I consistently find that the @font-face does not work in Firefox unless I use a Private Tab, but I prefer to use a regular Tab so that I can keep track of what pages I have visited. In a Private Tab the Android app displays Hebrew with cantillation marks as nicely as Windows does using the very same font. This is probably an unintended bug, as I cannot imagine why you would want Private Tabs to work better than the regular ones. The css function in question is:
    @font-face {
    font-family: 'Shlomo LB';
    src: url('../ShlomoLightBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    }

    Hello,
    Thank you for bringing this up. There is an open issue in Bugzilla - [https://bugzilla.mozilla.org/show_bug.cgi?id=769194 src:local() @font-face rules doesn't work on Android]. But in this case you are mentioning a src:url, so I don't know if they are related.
    Also, can you please confirm if you are using NoScript or any other plugin on your browser and if there are settings that differ for the normal tabs vs. private tabs (noscript has an option to block @font-face).
    Would it be possible for you to create a sample for testing this?
    Thank you

  • @font-face bug in FireFox 5 on Windows XP

    This is really a solution. So I have a website that I am working on and I am using the @font-face and FF5 would not load the font. Then all of a sudden it was loading one the homepage but not the subpages as I quickly went back and forth through the pages. The instaces were using the exact same CSS! How is this possible? IE, Safari, Opera, Chrome were all loading the font. So I banged my head against the wall and realized that I didn't have www. in front of my domain.
    If you are using @font-face with FireFox 5 and it is not loading the font, try adding the www. if you are not using it. Which also means I have to create a redirect to all http://domain.com users to http://www.domain.com so they don't get this problem.
    Check out this video for proof: http://www.screenr.com/NPSs

    You can use HTTP access control to make that less strict.
    * http://www.webfonts.info/wiki/index.php?title=%40font-face_support_in_Firefox
    <blockquote>Same-origin rule: By default, Firefox will only accept relative links. If you want to use absolute links or include fonts from different domains, you need to send these fonts with Access Control Headers.
    </blockquote>
    * https://developer.mozilla.org/En/HTTP_Access_Control
    * https://developer.mozilla.org/en/CSS/@font-face

  • @font-face not working in FF, but working elsewhere.

    Hey, I've been trying to get @font-face working in Firefox, but it just won't work. I'm hosting the font externally and the way I'm doing it works on other browsers. This is my code:
    <body bgcolor="CA2E28" style="margin-left: 0px; margin-right: 0px;">
    <style type="text/css" media="screen, print">
    @font-face {
    font-family: "Blackout";
    src: url(woff link is here, don't want to put it here though.);
    body { font-family: "Blackout" }
    </style>
    <center>THIS SHOULD BE BLACKOUT.</center>
    </body>

    ''jscher2000 [[#answer-709096|said]]''
    <blockquote>
    Can you check to see whether Firefox is downloading the file? To do that, first open the Web Console in the lower part of the tab below your page using either:
    * Ctrl+Shift+k
    * "3-bar" menu button > Developer > Web Console
    * (menu bar) Tools > Web Developer > Web Console
    Click the "Network" button/tab along the top of the console and reload the page. Here you can see whether Firefox is requesting the file and, if so, whether it is retrieved.
    If that checks out, then click the Console tab and reload the page and watch for any error messages that might relate to the font. Anything strange?
    If the font is downloading and there are no error messages, use the Inspector tab to look at the body element and see whether the style is there and is being given effect (i.e., no line-through).
    If all that is good, you might double-check your personal settings to make sure you aren't overriding website fonts. Either:
    * "3-bar" menu button (or Edit menu) > Preferences > Content
    Click the Advanced button and make sure you have a checkmark for "Allow pages to choose their own fonts".
    If all of that is good, then... it's a mystery. Have you checked Firefox on other machines or other operating systems?
    ''For reference:'' https://developer.mozilla.org/docs/Web/CSS/@font-face
    </blockquote>
    This message came upon refreshing:
    Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <my font like here>. This can be fixed by moving the resource to the same domain or enabling CORS. Blackout_Midnight-webfont.woff
    And this one soon after:
    downloadable font: download failed (font-family: "Blackout" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed
    source: <my font link here>

  • Font face="army" works in my editing program for IE but not firefox

    font face="army" works fine in IE but not firefox when using my website editing program
    == This happened ==
    Every time Firefox opened
    == everytime

    If you check Firefox's Web Console (Ctrl+Shift+K) it'll tell you any errors it's finding and the line of code it's finding it on.
    The problem it seems to be having up front is that IDs are case-sensitive - "layer02" is not the same as "Layer02", for example.
    There may be further errors once it's past that, but all the current browsers come with the tools you need to weed out any further issues.
    Further Javascript reference: https://developer.mozilla.org/en-US/docs/JavaScript

  • "@font-face" problem only with firefox. I have attached a style sheet while i was embedding my personal fonts into a website, but Firefox won't load them. Why?

    I was hand coding my new website. This time i was trying to embed some personal fonts into my website, so i used a style sheet to embed which is coded like
    "@font-face {
    font-family:Sofia;
    src:url(../fonts/Sofia-Regular.otf);
    All the font work fine in the root folder of my site. But whenever i am creating dreamweaver templates and using them on pages which are in different folders but in the same root directory, the fonts are set back to default font. This problem is only with Firefox. Chrome, IE, Opera etc. works fine. Please Help!

    i run into the same problem the last days.
    using bootstrap and the fontawesome iconfonts.
    everythings fine with chrome an ie, but no fonticons with firefox...
    found alot of solutions, but none of them worked.
    then, using the webdeveloper console (i used firebug all the time before) i see the error why the webfont was not loaded:
    [14:18:36.161] GET http://www.example.com/font/fontawesome-webfont.ttf?v=3.2.0 [HTTP/1.1 401 Authorization Required 21ms]
    yes, the site is behind a '''htaccess''' login.
    first load after login is => everything ok!
    after following an internal link => no webfonts!
    after disabeling the htaccess login, everything works fine!
    but that can only be a workaround!
    why firefox didnt recognize the login/authorization like chrome does?!
    what todo if you have your site behind htaccess and want to use webfonts?!

  • Has Mozilla changed the way Firefox displays @font-face enbeded fonts? The site I'm codeing works in Safari, Chrome, and IE, but Firefox 8.0.1 doesn't display the embeded font.

    Has Mozilla changed the way Firefox displays @font-face enbeded fonts? The site I'm codeing works in Safari, Chrome, and IE, but Firefox 8.0.1 doesn't display the embeded font.

    No problems here with the H1 headers.
    Reload web page(s) and bypass the cache.
    * Press and hold Shift and left-click the Reload button.
    * Press "Ctrl + F5" or press "Ctrl + Shift + R" (Windows,Linux)
    * Press "Cmd + Shift + R" (MAC)

  • Firefox 14.0.1 @font-face displaying most web fonts in bold, even though it works fine on Windows FireFox, IE9, Chrome, and Safari

    Have been working with a web site and half of the @font-face web fonts have turned to extreme bold only on Firefox 14.0.1 for Mac OS X, they work fine on windows versions of firefox and all of the other browsers.
    My firefox updated a couple days ago, which is when I noticed the problem.

    You can do a check for corrupted and duplicate fonts and other font issues:
    *http://www.thexlab.com/faqs/multipleappsquit.html - Font Book 2.0 Help: Checking for damaged fonts
    *http://www.creativetechs.com/iq/garbled_fonts_troubleshooting_guide.html
    You can check the <b>gfx.downloadable_fonts.*</b> prefs on the <b>about:config</b> page.
    *http://kb.mozillazine.org/about:config

  • I'm using the @font face to embed fonts on my site. Everytime I use a heading tag Firefox adds extra emphasis (making a bold font even bolder). How can I resolve this? The heading tag renders fine in Chrome/Safari.

    <pre><nowiki><?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <link rel="stylesheet" type="text/css" href="index/fonts/fonts.css"/>
    </head>
    <body>
    <h1>Heading2</h1>
    <p> Testing </p>
    </body>
    </html>
    */CSS/*
    */Fontface rule/*
    @font-face {font-family: 'Gibson-Bold';src: url('159693_2.eot');src: url('159693_2.eot?#iefix') format('embedded-opentype'),url('159693_2.woff') format('woff'),url('159693_2.ttf') format('truetype'),url('159693_2.svg#wf') format('svg');
    */Testing use of Fontface/*
    h1, h2, h3, h4, h5, h6 {
    font-family: Gibson-Bold;
    font-style: normal;
    font-size: 10pt;</nowiki></pre>

    You're welcome.
    It is always a good idea to reload and bypass the cache after you have made changes and uploaded new files.
    Reload web page(s) and bypass the cache.
    * Press and hold Shift and left-click the Reload button.
    * Press "Ctrl + F5" or press "Ctrl + Shift + R" (Windows,Linux)
    * Press "Cmd + Shift + R" (MAC)

  • Firefox 3.6.9 / Windows 7 will not print using font specified with @font-face - any workarounds?

    I've seen a few mentions of this problem around the interwebs, but can't find a resolution. I used [http://www.fontsquirrel.com/fontface/generator fontsquirrel's font-face generator] to prepare different versions of a font for cross-browser display. Screen presentation in almost all browsers is fine, and almost all browsers print the embedded font as well - except for Firefox/PC (3.6.9/Windows 7).
    I have tried inline styles, styles inside of the head, and external stylesheets, all with and without media type print. What can I do?

    Hi John,
    Can u try the work around mentioned in the below link
    http://notsomany.wordpress.com/2010/03/30/jinitiator-working-on-windows-7/
    Also some times IE8 can block the webutil_file_transfer.
    AS_to_Client if "protected mode" is ON for the security zone your forms url is in (look in the statusbar in IE ->
    internet, trusted site, ... -> protected mode: On/Off)
    Regards
    Fabian

  • FF 25 has issues on OS-X 10.8.5. It hangs sites with heavy dom manipulation + web font faces The same page is fine on FF25/Win. Is this being looked at?

    I've been having a lot of issues with Firefox 25 hard-hanging on OS-X 10.8.5. Firefox 24 worked perfectly with various sites I've had problems with recently. Firefox 25 on Windows works fine with the same sites, so does Google Chrome 30, IE9, IE10, and IE11. The hang is very specific to FF25/OSX. Is this being looked at or reported by anyone else? My co-workers are also hitting this. It seems like FF25/OSX has some sort of deadlock condition when there is heavy dom maniplation occurring via JavaScript along with the usage of Web Fonts (font-face/font family). I have to force-quit it and restart. Safe mode makes no difference. Nor does clearing site information.
    If there is any debug I can capture (such as triggering a stack dump) I am more than willing to generate it.

    Followup. Any further updates from Firefox support? This is a blocking issue at my company. We are strong Firefox advocates, but this is starting to damage Firefox's reputation here.

  • I have a php module which runs fine in Firefox and all other browsers but not Safari. It always run twice - I see a small ? in upper right corner which is causing it to run twice but NO idea why? Help - thank you

    I have a php module which runs fine in Firefox and all other browsers but not Safari. It always run twice - I see a small ? in upper right corner which is causing it to run twice but NO idea why? I read it MAY have something to do with am image it cannot load but I see them all loaded.  Help - thank you

    Could you share a link to the page?
    Seeing it in context and in our browsers is much easier to debug.
    If not, make sure to run the validator here The W3C Markup Validation Service and clear out any problems. HTML errors, especially structural ones, will cause all kinds of display problems in various browsers/versions/platforms.

  • I have loaded the new Flash version into Firfox several times, but none of my sites recognize it when using Firefox. It works fine on all other browsers, but I would prefer to use Firfox if this problem can be solved.

    I use Firefox 4.0.1 on a Mac running Os X10.5.8. When I try to run Facebook or other sites that are heavy users of Flash I get a message that the new version of Flash must be loaded. I have loaded the latest version several times, but still get the message and these sites will not run on Firefox. The sites run fine with Safari or Chrome but I prefer to use Firefox if it can be made to run these sites. Thank you for any suggestions you have to help fix this problem.

    Apparently it's related to the Firefox plug in.
    This isn't exactly a solution but more of a way to avoid opening PDFs with Firefox's plug in.
    1. Highlight "Tools" from the Menu Bar in the top left of the screen (or click "Options" if using the Firefox Compact Menu)
    2. Select to "Options
    3. Select "Applications"
    4. Look for "Adobe Acrobat Document" under Content Type and to the right under Action select "Use Adobe Reader (default)" instead of the using Adobe Acrobat in Firefox
    5. Open a test PDF. It should open in it's own window now.
    Again, not a complete solution but something that'll at least let you scroll with PDFs open.
    More info here: http://forums.mozillazine.org/viewtopic.php?f=38&t=2171033

  • PDF Report with Korean font work fine in 9iDS but not in 9iAS

    Hi,
    I am using Oracle 9i Application Server 9.0.2.0.0, When i try to run the report using Korean font The pdf report not showing the korean font correctly.
    I tried the same in 9ids , which is working properly. I have done exactly the same setting in 9ias, but it is not working.
    The Oracle ias report service dialog shows version 9.0.2.0.3
    My 9ias settings
    NLS_LANG = AMERICAN_AMERICA.KO16KSC5601
    In uifont.ali the settings are
    [ PDF ]
    .....ZHT16BIG5 = "MSungStd-Light-Acro"
    .....ZHS16CGB231280 = "STSongStd-Light-Acro"
    .....KO16KSC5601 ="HYSMyeongJoStd-Medium-Acro"
    Installed the Korean font(HYSMyeongJoStd-Medium-Acro) from Adobe site
    the font file HYSMyeongJoStd-Medium-Acro exist in C:\Program Files\Adobe\Acrobat 5.0\Resource\CIDFont
    also installed the asian Suit 2000(Union Way) on the ias server.
    I have checked the Smoothing display option also in Acrobat 5. The Document font is showing
    Origial font = HYSMyeongJoStd-Medium-Acro type=type1 (CID) Encoding=KSC-EUC-H
    Actual font = HYSMyeongJoStd-Medium-Acro type=type1 (CID)
    Anyone please let me know do i need to do any other changes or i need to apply any patch . Please reply, Thanks in advance
    with Regards
    Rohit.

    Hi Navneet,
    Thanks for the immediate reply.
    As such there is no change in both the report servers , same output in win2000 and win2003. I am generating the rep from 9ids for both 9ids and 9ias, and i am using font UWKMJF which is korean charecter support, but 9ias is generating some junk charecters with spacing , 9ids is working fine.
    The PDf Document font is showing
    Origial font = HYSMyeongJoStd-Medium-Acro type=type1 (CID) Encoding=KSC-EUC-H
    Actual font = HYSMyeongJoStd-Medium-Acro type=type1 (CID)
    which is same as 9ids, but the data displaying in the pdf are not proper.
    As you mentioned about the patch, which patch i have to apply. can you please also mention the patch numbers.
    Please help me.
    Thanks and Regards
    Rohit.

  • Spry menu look fine in Firefox, Safari but not Intenet Explorer

    Help how cann I Spry working fine in Internet Explorer!!!
    Look with firefox this page and with Intenet Explorer and see the differents. In Firefox the menu show nice, but into Intenet Explorer not!!
    When i open the same page lokale the page ist good till I alow the script inside Internet Explorer....
    http://geerthakze.nl/vriendaanzee/index.html
    I hope we can find a solution!!!

    Gramps
    Alvast hartelijk dank voor de tips, de voorgestelde wijzegingen staan nu online. Maandag kijk ik hier nog verder naar, nu heb ik nog wat weibg marge links en rechts en staat het submenu nog iets te ver weg.
    Als het mogelijk is zou ik de pijljes het liefst voor de tekst willen hebben (maar dat vindt ik minder belangrijk).
    Alvast een fijn weekeinde gewenst
    Geert
    Verstuurd vanaf mijn iPhone
    Op 1 okt. 2011 om 15:48 heeft altruistic gramps <[email protected]> het volgende geschreven:
    Re: Spry menu look fine in Firefox, Safari but not Intenet Explorer
    created by altruistic gramps in Spry Framework for Ajax - View the full discussion
    Now everything works nice, I can now chancing the Layout, but watt is wrong!!
    Geert,
    Please update the website with the changes to the menubar and then tell me what changes you wish to make to the layout.
    If you are having a problem expressing your views in English, you can PM me in het Nederlands.
    Gramps
    Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/3948627#3948627
    To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/3948627#3948627. In the Actions box on the right, click the Stop Email Notifications link.
    Start a new discussion in Spry Framework for Ajax by email or at Adobe Forums
    For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.

Maybe you are looking for