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...
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...
Done. I had to create a custom class to do this... seriously? I can't edit right from the color options? :/
Hi lucasfxd,
The default text color is controlled by this rule in bootstrap-modified.css.
You can override this color by using this CSS style in the Custom CSS section of Customize.
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; }
Thank you!
body and not p?
body and not p?
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.
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.
"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.
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.
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.
These appear to be the text styles with antialiasing:
"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...
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...
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
Take a look at this screenshot in Firefox! So much better:http://prntscr.com/7o954n
Difference between Chrome and Firefox:http://prntscr.com/7o9gb8
