Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts

    FF Font Rendering

    Browsers render font very differently in various browsers. My particular question is directed towards Firefox rendering Arial bolder than necessary. Are there any ways I could reduce this? Are there any fonts I can import that render more consistent across browsers?

  • #2
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    Hi Sammy,

    I would just like to throw something out there to you to see if it's useful regarding your issue.

    About a year ago, I realized FF didn't understand points measurement. I had always been using IE, then when I viewed my page in FF, the fonts were much larger and where one line used to be displayed for a headline, two lines were now being displayed -- if the line was close to being too tight already.

    Does this add anything useful for discussion? I know we all use either ems or pixels for font size, but if FF had an issue with points, it may be well to guess that other issues with fonts exist. If we stop and think about it, if FF didn't understand points, but it still displayed the text, that means it defaulted to something -- pixels, I suppose.

    Just thought I would share this in case it's useful.

    --Kevin

    .
    Last edited by Kevin_M_Schafer; 02-13-2012 at 04:35 AM. Reason: text clarity
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #3
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I am lost. the default is 16px. however the font is bolder in firefox http://css-tricks.com/font-rendering...-ie-vs-safari/

    The article is nice and all, but what can I do to "fix" this.

  • #4
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    Sammy,

    Your URL doesn't seem to be correct.

    --Kevin

    .
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #5
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    Your link works now.

    Try an experiment with input boxes. The same thing holds true for them regarding FF. I always style them with width and height and apply a border, otherwise they're all over the place in different browsers.

    If you have a chance, create an input box and view it in different browsers. It's amazing how different their lengths are.

    --Kevin

    .
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    The lengths would be the same if you used a px width, with or without font rendering differences. I'm talking about the boldness of text, not inputs.



    My site looks terrible with FF's boldness. I usually let it slide, but this time it is too drastic. Especially with the 16px Arial Chrome. Chrome renders that amazingly, but in FF it is way too bold.

  • #7
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,718
    Thanks
    41
    Thanked 191 Times in 190 Posts
    have you considered making the weight lighter/smaller than what you *want it to be and then using js re-render the page?
    You would retain your pages functional and then provided they have js on (which most do) it would render the page the way you want it (ie re-style the font based on the browser)

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    On the page to which you link, the screenshots of Firefox are no bolder than those in anything else, as far as I can see.

    Can you give a link to your page where you're seeing this problem?

    I can't say I've ever noticed anything different as regards the boldness of fonts between browsers - certainly nothing akin to the level you describe.

  • #9
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by alykins View Post
    have you considered making the weight lighter/smaller than what you *want it to be and then using js re-render the page?
    You would retain your pages functional and then provided they have js on (which most do) it would render the page the way you want it (ie re-style the font based on the browser)
    Won't this basically make it impossible to select text, though? It seems unnecessary.

    @OP: There's nothing you can really do. You generally can't--and shouldn't try to--mess with the client. Is there any reason that this is absolutely critical?

  • #10
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    The website is using some heavy rgba. In chrome of course, it is working well, but with ff and ie's terrible font rendering, it is looking very scrappy. The problem is magnified by the rgba background. I was wondering if I could emulate chrome's font type. I could target browsers as stated above, but I think my real question is are there any fonts that would not get murdered by ie or ff with respect to an rgba background? are all fonts rendered differently or are there some fonts .ttf or is it just arial?




    sorry sb65, the site is private
    Last edited by Sammy12; 02-14-2012 at 08:12 PM.

  • #11
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I'm still keen to see the page, if possible.

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Code:
    sorry sb65, the site is private
    Fair enough. I still cannot see any difference between Chrome and Firefox on a test page with an rgb background....maybe it's my eyes....


  •  

    Posting Permissions

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