• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Body Text Too Faint in Chrome

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Body Text Too Faint in Chrome

This topic is: not resolved

Tagged: body, chrome, css, font

  • This topic has 3 replies, 2 voices, and was last updated 4 years, 4 months ago by Victor Font.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 30, 2017 at 2:41 am #214954
    chrispking
    Participant

    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
    December 30, 2017 at 7:56 am #214959
    Victor Font
    Moderator

    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?

    December 30, 2017 at 9:43 am #214965
    chrispking
    Participant

    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

    December 30, 2017 at 12:12 pm #214968
    Victor Font
    Moderator

    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
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2022 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble