Menu font not loading

  • Unknown's avatar
    pssethi · Member ·

    Hello,

    I changed my body font in the Customizer for a minute to check something, and it looks like it has messed up my CSS a bit. The fonts disappeared for a while, but I was able to fix that. The only issue now is that the menu font (which I would like to be Raleway) is not loading. It was before, and I’m not sure why the code isn’t working now.

    Here is the code:

    div.menu-main-menu-container a {
    font-family: “Raleway”, sans-serif !important;
    color: #585858 !important;
    }

    div.contact-field .email-link, div.contact-field {
    font-family: “Raleway”, sans-serif !important;
    color: #383838;
    }

    .contact-field-label {
    color: #383838;
    }

    I had it as Raleway-1 before (and that worked), but now Raleway and Raleway-1 aren’t working. Can you please help?

    Thank you so much.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    pssethi · Member ·

    I’m not sure how, but I changed it to Raleway-1, and it worked. I had tried that many times before I uploaded my question. Not sure what’s going on with WordPress, but now I have a follow-up question.

    The reason why I had changed the body font in the first place is because on one page (simransethi.com/breadwinechocolate) the i’s and n’s are unbolded. I have no idea why this is happening (it is certainly not intentional). My friend gave me this code to use, but it doesn’t seem to work:

    body {
    -webkit-font-smoothing: antialiased;
    }

    Could anyone else help me? Thank you!!

  • Unknown's avatar
    thesacredpath · Member ·

    You know, Raleway is a very lightly stoked font, but I’m seeing it render properly in Safari and Chrome without any modifications. In Firefox though, things are not good. Add the following to your custom CSS and save. What you see in the preview on the CSS edit page will be different from what you see on the actual site. 

    .wf-active body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}
  • Unknown's avatar
    pssethi · Member ·

    Thank you so much. I added the code to the CSS. Does that look better to you on Firefox – and is the font still readable on Safari and Chrome? It seems to have made the menu and email a little lighter.

    Also, the i’s and n’s are still unbolded on my boss’s computer. It looks fine on mine, but is there any way to fix it?

    Thank you again. I really appreciate your help.

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome and yes it does look better in FF although a bit light, which is expected given we have to use “grayscale” as the font-smoothing in FF. Chrome and Safari do too.

  • Unknown's avatar
    pssethi · Member ·

    Thank you very much. I darkened the text a bit.

    Do you know how to fix the unbolded i’s and n’s on this page: simransethi.com/breadwinechocolate? As I said, I’m not seeing it, but my boss is. She would like for it to be fixed, if possible.

    Thank you!

  • kathrynwp · Staff ·

    Do you know how to fix the unbolded i’s and n’s on this page: simransethi.com/breadwinechocolate

    Could you let me know the browser, version, operating system, and device where this is apparent so we can try to see it and try to find a solution?

    For example:

    Macbook Air 10.9.5, Firefox 43.02

  • Unknown's avatar
    pssethi · Member ·

    Hi! So sorry for the delay.

    I’m seeing it on OS X El Capitan Version 10.11 (Mac Pro), Chrome Version 47.0.2526.111 (64-bit).

    Thank you!

  • kathrynwp · Staff ·

    Thanks for the details. I can see the issue in Chrome. There is a bug in the way Chrome renders the Sorts Mill Goudy font in bold.

    This was reported to Typekit a while back and this is what they said:

    “This appears to be related to the fact that Sorts Mill Goudy doesn’t actually have a bold weight, only a 500 weight. When a page’s CSS specifies that text styled with Sorts Mill Goudy should be set as “bold” (or, in fact, any numerical weight from 600-900), the browser will attempt to synthesize a bold weight based on the font’s closest available weight (in this case, 500). It looks like Chrome does an odd job of that for certain characters from Sorts Mill Goudy 500.”

    For that reason, this font is no longer available to new sites. Typekit did report the issue to Chrome but apparently it has not been fixed on the browser’s side.

    To get around this issue, I’d suggest you choose another font.

  • Unknown's avatar
    pssethi · Member ·

    I really appreciate this explanation. Thanks so much! I will think about changing the font.

  • kathrynwp · Staff ·

    You’re welcome!

  • The topic ‘Menu font not loading’ is closed to new replies.