Chrome vs Firefox font rendering comparison - weird bold appearence in Chrome

Permalink
Something very simple was taking a lot of my time. Changing the default text color in 5.7.4.2. A simple custom class fixed, cause appearently we can't change that in CMS interface. Now I got this: bold font appearance in Chrome, while in Firefox is normal and much better looking.

See screenshot:http://prntscr.com/7o9gb8

Is there a way to change that? Make it look like in Firefox...
Already tried webkit antialiasing settings and others...

View Replies:
lucasfxd replied on at Permalink Reply
Done. I had to create a custom class to do this... seriously? I can't edit right from the color options? :/

p{
      color: white;
}
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi lucasfxd,

The default text color is controlled by this rule in bootstrap-modified.css.
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}

You can override this color by using this CSS style in the Custom CSS section of Customize.
body {
    color: grey;
}
lucasfxd replied on at Permalink Reply
Thank you!

body and not p?
lucasfxd replied on at Permalink Reply
Hey friend, do you have any idea of how to make the font lighter as possible? I tried using font-weight:100, but still bold... Looks ugly. I like the links style/font in the page configuration ("Design", "SEO" and others...) I want to make my default font thinner like them.
MrKDilkington replied on at Permalink Reply
MrKDilkington
Like the body fonts, the font that you are referencing depends on your system fonts.

"font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;"

I am using a Windows computer that does not have Helvetica Neue or Helvetica, so the next available locally installed font is Arial. Your computer might have one of the Helvetica fonts and look different to what I see.

If you need more control over how text will display, then you will want to use a web font.
lucasfxd replied on at Permalink Reply
Just look at the difference!

http://prntscr.com/7o8wau

1. concrete5
2. simple html/css
3. this page

concrete5 have some kind of antialiasing... I don't know... I just want to create a text closer to this site's text.
MrKDilkington replied on at Permalink Reply
MrKDilkington
These appear to be the text styles with antialiasing:
div.ccm-page {
    -webkit-font-smoothing:antialiased;
}
div.ccm-page header nav ul {
    -webkit-font-smoothing: antialiased;
}


"Webkit implements something similar with a different name: -webkit-font-smoothing and different values, however, just like font-smooth, this is non-standard and should not be used.

none - turn font smoothing off, show the text with jagged sharp edges.
antialiased - smooth the font on the level of the pixel, as opposed to the subpixel. Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter.
subpixel-antialiased - on most non-retina displays this will give the sharpest text."

https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth...
lucasfxd replied on at Permalink Reply
I already tried that, but nothing happens, even using "none" or "antialiased".
Take a look at this screenshot in Firefox! So much better:http://prntscr.com/7o954n
lucasfxd replied on at Permalink Reply
Difference between Chrome and Firefox:http://prntscr.com/7o9gb8