1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Google Fonts & 'Bold' 700 Weight Issue

Discussion in 'Off Topic' started by TheBigK, Mar 27, 2015.

  1. TheBigK

    TheBigK Well-Known Member

    I'm thinking of using Google Font 'Muli' on our site and Google Font only lists Light 300, Normal 400, Light 300 Italic and Normal 400 Italic.

    When I set it up anyway as my primary font, the post editor allows me to 'bold' the font but when I post it, the font loses the bold property.

    BOLD.jpg


    Is there any work-around for this?
     
  2. Daniel Hood

    Daniel Hood Well-Known Member

    in your extra css file put

    Code:
    b { font-weight: bold !important; }
    
    see if that helps.
     
  3. TheBigK

    TheBigK Well-Known Member

    Last edited: Mar 27, 2015
  4. Martok

    Martok Well-Known Member

    Is the text editor actually using that font or is that a different one in the text area? The letters don't appear to be quite the same shape as the letters in the finished post.
     
  5. TheBigK

    TheBigK Well-Known Member

    It's the same font. I don't use any other fonts than the standard; but have been trying by playing around with 'Muli' set as the main font for the site. In any case - the post does not respect the editor styling for the font. I don't have that issue with other fonts included with the editor.

    Screen Shot 2015-03-28 at 12.47.47 am.png

    The second line is 'Tahoma' and the third one is 'Verdana'. The first one is now the new default 'Muli'. In each of the lines, I bolded the same set of words; but it appears that 'Muli' lost it.
     
  6. Daniel Hood

    Daniel Hood Well-Known Member

    Probably an issue with that font then.
     
  7. TheBigK

    TheBigK Well-Known Member

    Right! But I'm wondering what magic does the editor do that it can make the font show bolded text.
     
  8. Martok

    Martok Well-Known Member

    It must be replacing the font in the editor with a bold version of a similar font. The bold version of a font is specifically created, it isn't just magically emboldened by a text editor. If there wasn't any italicised version of that font then it wouldn't show in italics in the final post either.
     
  9. John L.

    John L. Well-Known Member

    The bold in the text editor doesn't look like the same font. I believe your text editor is showing a default or fallback font. I believe my forum does that as well when using Google Fonts.
     
  10. TheBigK

    TheBigK Well-Known Member

    Requesting response from @Mike Creuzer . I'm using Antiquark theme from Audentio and have my settings look like this -

    Screen Shot 2015-03-28 at 9.18.58 am.png

    I think the text editor shows the font 'muli'.
     
  11. Optic

    Optic Well-Known Member

  12. TheBigK

    TheBigK Well-Known Member

    I'm testing it on my local machine so don't have it running on the live site.

    Btw, I don't see any text in bold on the page that you've linked to.
     
  13. Optic

    Optic Well-Known Member

    Strange... it's a little subtle but these parts should definitely be showing as bold:
    muli-bold.png
     
  14. Martok

    Martok Well-Known Member

    That's just the font in a larger size, not in bold.

    As I said in my previous post

    The bold being seen in the text editor is not muli bold as that doesn't exist. You are seeing a similar replacement font. Look carefully at the shape of the letters, they aren't the same.
     
  15. Optic

    Optic Well-Known Member

    In my third red box example I did not change the font size.

    The problem @TheBigK is having is Muli is not rendering bold correctly.

    Using his Line 1 example:
    [​IMG]

    I've increased the font size in my example to match his:
    muli-bold-v2.png

    Muli is definitely capable of bolding, just not rendering on his browser for some reason..
     
  16. Martok

    Martok Well-Known Member

    Interesting article here:

    http://alistapart.com/article/say-no-to-faux-bold

    I think that the redactor editor is either replacing with a similar bold variation or is adding a faux bold to the font. XenForo itself is correctly not adding a faux bold (as faux bold can be horrible).
     
    Optic likes this.
  17. TheBigK

    TheBigK Well-Known Member

    Made an interesting observation. The bolding issue is specific to Google Chrome. Both Safari and Firefox show the font in bold. Nothing much to lose if we decide on using it.

    I've already requested the font creator to add more weights to Google Repository.
     
  18. ses

    ses Member

    @TheBigK did you found a solution?

    I also use a audentio-Template and have the "bold"-editor-issue with font's - for example: "Roboto".
     
  19. TheBigK

    TheBigK Well-Known Member

    I guess Roboto has all the required styles so you're covered. You just need to specify Roboto:300,400,500,700 (the ones that you use) in your settings (typography).
     
  20. ses

    ses Member

    @TheBigK - My problem is, that the font looks bold in the editor - nowhere else.
     

Share This Page