Body Text Too Faint in Chrome

[chrispking]

Hi

I'm using the Metro Pro theme on one of my sites https://goo.gl/g8cAJg

The body text in Chrome (Mac) desktop looks too faint and unclear. In Safari and Firefox it appears OK.

I've tried hacking the CSS (which is pretty much the extent of my coding skills). When I up the font weight from 300 to 400 or even 350 it looks too bold. When I up the font size from 16 to 18 it still appears faint in Chrome.

On a mobile with Chrome (Android) it seems to look OK.

Can anyone help so I can fix this Chrome specific issue?

Many thanks and in advance and Happy New Year everyone!

Chris

https://goo.gl/g8cAJg

[Victor Font]

Each browser has its own font rendering engine/method. I can see you removed the Oswald Google font supplied with the Metro theme in favor of using system fonts supplied by the end user's computer. Using system fonts is a hit or miss situation. Web fonts are especially designed for use in web pages and are loaded with CSS @ font-face declarations. This makes the user's browser download web fonts and render text correctly.

Desktop or system fonts are designed to be installed on a computer and are ready for use in applications also installed on your system (like Word, Photoshop, Illustrator…). Even though there are some standard font calls "Safe WebFonts" that are rendered correctly with just CSS, the list is very short and the browser depends on the OS to render them. This is why there are variations across browsers.

Truthfully, trying to get all browsers to match exactly using system fonts is an exercise in futility. It depends entirely on the font being installed on the end users' desktop and if the font isn't there, the browser will use a fallback font, which will change the look anyway. Rest assured, end users won't notice. They won't be switching between browsers and will use whatever their favorite browser is.

If you want a consistent look across all browsers, use a web font. Maybe this will help you: https://victorfont.com/use-google-fonts-locally/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[chrispking]

Hi Victor

Thanks very much for your detailed response, much appreciated.

I don't know how the Google font has been replaced with a system font. It may have occurred when I was hacking around (!), however, certainly I don't know how to do that.

Can I clarify with you that you're only referring to the Oswald font which is used in the headers?

The body copy is using Helvetica Neue which is out of the box from the Metro Pro theme https://my.studiopress.com/themes/metro/#demo-full That's the text that looks really faint. Is that using the Google font?

If it is the Google font, is there anything I can do?

Thanks in advance.

Chris

[Victor Font]

I couldn't find Oswald referenced anywhere in your style sheet. If you want the consistent look, I would pick a sans-serif Google font and use that instead.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts