Heebo Google Font - Special characters appearing strangely

Viewed 1200

I'm using Heebo Google fonts and commas and apostrophes appearing strangely in my HTML. As far as I know it only appears on desktop and not mobile.

Heebo is imported like this:

    <link href="https://fonts.googleapis.com/css?family=Heebo:400,500,700,800|Fira+Sans:600" rel="stylesheet">

Heebo font issue https://culturestride.com/

4 Answers

I managed to fix this by using the github version. I converted them to the Webfont versions using https://transfonter.org/. I added a font cache (OMGF Wordpress Plugin), disabled Google Fonts (disable google fonts) on my Wordpress, then replaced these fonts (through cpanel). I know this is a temporary fix but it works. Working site: https://littlethiings.com. If someone, else finds a related fix please do update this forum. I created a css format for the font, you can call the included stylesheet and your font should work as intended (remove google font first). Link (scroll to bottom). Thanks!

UPDATE: The rollback has been completed. You can switch back to the google fonts again.

Fixed a few hours ago in the Google Fonts API. No changes need to be made.

The cheapest solution to the problem

You can include all characters in Heebo font but not the ,

Use this link tag for your font. I have included all characters of keyboard in it but not including those chars who are not working properly. As a result of which , will work in normal way and it does not look ugly.

<link href="https://fonts.googleapis.com/css? family=Heebo:400,500,700,800|Fira+Sans:600&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz?.1234567890[]';.()/\!@#$%^&*-=+_{}:|\.ABCDEFGHIJKLMNOPQRSTUVWXYZ*~\>" rel="stylesheet">

I had the same error from today in my website and i guess is a Google Font error.

Basically, what you need to do is to download an old version of the font, for example https://www.fontsquirrel.com/fonts/heebo). Then call again the font inside your local .css and not anymore through Google Api.

@font-face {
    font-family: 'Heebo';
    src: url('Heebo-Regular.eot');
    src: url('Heebo-Regular.eot?#iefix') format('embedded-opentype'),
        url('Heebo-Regular.woff') format('woff'),
        url('Heebo-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
Related