• 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

Font in Navigation Different on Firefox and 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 › General Discussion › Font in Navigation Different on Firefox and Chrome

This topic is: resolved

Tagged: aliasing, altitude, chrome, firefox, font smoothing, navigation, webkit

  • This topic has 7 replies, 4 voices, and was last updated 7 years, 4 months ago by SimplyAA.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 12, 2015 at 6:53 pm #165320
    SimplyAA
    Member

    Hi there.

    I'm using the Altitude theme and having issues with the main navigation menu font. It looks great in Firefox but in Chrome and Safari the font is sort of fuzzy. The site isn't live so I am attaching images. I would really appreciate any insight.

    Thank you.

    Firefox:
    http://www.loveasimplelife.com/temp/firefox.png

    Chrome (and same in Safari):
    http://www.loveasimplelife.com/temp/chrome.png


    Angela

    September 14, 2015 at 8:37 am #165429
    David Chu
    Participant

    Hi,
    It's a good example of how fonts do vary in appearance, and very skinny ones really stand out as tricky. I can't comment specifically because I don't have a link, so my comments will be very general.

    Given what you're saying, this font probably causes some issues for Webkit, which is the engine for those browsers. With any very skinny font, I've found that if you use the smallest size possible, you may have this type of trouble.

    Again, I can't see your code, so it may be the font-weight, the font-size, letter spacing, even color, or something else.
    If it were me, I would just try bumping up the font size by 1 or 2 pixels, and that would probably get more clarity. The viewers with non-perfect eyesight would applaud, too. ๐Ÿ˜‰

    Good luck,
    Dave


    Dave Chu ยท Custom WordPress Developer – likes collaborating with Designers

    September 14, 2015 at 9:44 am #165437
    detroitwidget
    Member

    Hi Angela,

    Ditto Dave's suggestions above.

    I've also had luck on occasion by adding one of the following CSS declarations:

    -webkit-font-smoothing: antialiased;
    -webkit-font-smoothing: subpixel-antialiased;

    I hope this helps.

    September 14, 2015 at 10:03 am #165441
    David Chu
    Participant

    Detroit,
    Very nice idea! That could cure Webkit.

    Speaking of that, Angela, maybe you already did this, but you'll probably want to test in that nutty IE as well. ๐Ÿ˜‰

    Dave


    Dave Chu ยท Custom WordPress Developer – likes collaborating with Designers

    September 14, 2015 at 6:33 pm #165514
    SimplyAA
    Member

    Hi guys,

    Thank you for the feedback.. I really appreciate it. I've never used the webkit can you tell me I put that in my CSS and exactly how?

    Thank you


    Angela

    September 15, 2015 at 1:13 am #165546
    aabharan
    Member

    Hello SimplyAA, I just found the solution for you http://stackoverflow.com/questions/4698564/fonts-looks-different-in-firefox-and-chrome Just hit the URL and look at the source code. You will easily overcome with your problem. After reading this if you still facing a problem please let me know.

    Cheers, Aabharan

    September 16, 2015 at 8:49 am #165754
    detroitwidget
    Member

    Angela,

    On or about line 1043 of the Altitude Pro default style sheet (style.css), change this:

    .genesis-nav-menu > .menu-item > a {
              text-transform: uppercase;
    }

    To this:

    .genesis-nav-menu > .menu-item > a {
              text-transform: uppercase;
              -webkit-font-smoothing: subpixel-antialiased;
    }

    If you're feeling brave you can also experiment with the default body settings around line 141. Deleting or changing the WebKit font smoothing value may generate some interesting results:

    body {
    	background-color: #fff;
    	color: #000;
    	font-family: "Ek Mukta", sans-serif;
    	font-size: 20px;
    	font-weight: 200;
    	line-height: 1.5;
    	-webkit-font-smoothing: antialiased;
    }

    Consistent font rendering across all browsers is always a challenge. And font smoothing is a notoriously unpredictable property. As Dave suggested, my first approach is to play with the font weight and font size properties.

    ("WebKit" is just the name of the page rendering engine used by the Safari web browser. A modified version of WebKit is also used in Google Chrome; hence these two browsers frequently exhibit similar behavioral "quirks.")

    I hope this helps.

    Phil

    September 16, 2015 at 8:58 pm #165825
    SimplyAA
    Member

    Wow! You guys are brilliant. Thank you all. I took the easy route and did Phil's suggestion. Once I added that one line of code it was 100% better. That is amazing!

    Thank you again. I really appreciate it.


    Angela

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Font in Navigation Different on Firefox and Chrome’ is closed to new replies.

CTA

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

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 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