Big differences menu fonts between Chrome and Firefox

Home Forums Automattic Further Big differences menu fonts between Chrome and Firefox

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #111817 Resolve

    crcgtpc

    Hello,

    Today, I’m testing my website on Firefox and i find differences of font between the version on Chrome and the version on Firefox. I prefer the light font of Chrome (left on the screenshot) than the bold font of Firefox (right on the screenshot). is it possible to have the same font than Chrome on Firefox navigator ?

    Thx a lot for your help,

    Br,

    E.

    The blog I need help with is cgtpoitoucharentes.wordpress.com
    #152635

    crcgtpc

    Sorry, screenshot : http://wp.me/a3A2tk-2zD

    #152647

    Kathryn P.
    Happiness Engineer

    Since you’ve been making a great number of custom CSS changes lately, it’s likely that one of your recent changes affected the font display. As this is a retired theme, nothing has changed in its code in many months. I double-checked this on our end and there have been no display changes in Further in four months.

    To remove the bold on the main menu, change this:

    .primary-navigation {
    font-size: 12px;
    }

    .secondary-navigation {
    font-size: 12px;
    }

    to this combined declaration:

    .primary-navigation, .secondary-navigation a {
    font-size: 12px;
    font-weight: inherit;
    }

    Move this piece of CSS to the bottom of your custom CSS.

    Keep in mind that since you’ve added font-weight: bold on certain individual menu items, you may still see them in bold, and you may still see some shifting due to the change in menu size on hover. For example:

    .primary-navigation .menu-item-9714 > a:hover,
    .primary-navigation .menu-item-82 > a:hover,
    .primary-navigation .menu-item-70 > a:hover,
    .primary-navigation .menu-item-601 > a:hover {
    color: #bf0606;
    font-weight: bold;
    }

    If you want to avoid any shifting or boldness in your menus, you should remove this from your menu CSS.

    font-weight: bold;

    Even after these changes, the fonts may look a little different between Chrome and Firefox. This is because not every browser displays fonts in 100% exactly the same way.

    #152650

    crcgtpc

    It works well ! Thx a lot for your patience :)

    I have an ultimate question : how can i do to move the menu title (not the block) juste a little piece to the right in order to have a space juste before the first character of each menU title in the secondary menu ?

    Hope you can help me,

    Br,

    E.

    #152662

    Kathryn P.
    Happiness Engineer

    It works well ! Thx a lot for your patience :)

    Great.

    For new questions, could you please start a new thread?

    how can i do to move the menu title (not the block) juste a little piece to the right in order to have a space juste before the first character of each menU title in the secondary menu ?

    Do you have any guesses? You’ve been learning a lot about CSS. Can you find the class for that element?

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Big differences menu fonts between Chrome and Firefox’ is closed to new replies.