Search code examples
htmlcssfontswebfontsgoogle-webfonts

Amatic SC normal 700 - rendering issue with question mark character?

I'm using the Amatic SC 700 normal from google fonts.
This is the link on google fonts : https://www.google.com/fonts/specimen/Amatic+SC .

The issue is that right now the char ? is converted in ® .

The css code I used is: 

@import url(http://fonts.googleapis.com/css?family=Amatic+SC:400,700);

body {
    font-family: 'Amatic SC', cursive;
    font-style: normal;
    font-weight: 700;
}

The html looks like this : 

 <html> ???? </html>

This is a screenshot of the issue : enter image description here

This is the jsfiddle link: http://jsfiddle.net/m4vev43a/

I tested this issue on:

  • Chrome Version 42.0.2311.90
  • Firefox 37.0.1
  • Opera 12.16

Any idea how I can fix this?
Are my browsers getting crazy?
Or it's a bug in the font?

Update:

When using : 

 @import url(http://fonts.googleapis.com/css?family=Amatic+SC);

So without the suffix :400,700 the question mark character is displayed properly.

Unfortunately using the above code + bold text is totaly messing up with the letter spacing in Chrome, Firefox, Opera.

Solution

  • This is a known issue with the bold version of the Amatic font, as can be seen in this bug report from November, 2011. Your font was implemented correctly, it's just that the font file itself has a bug.

    A workaround is to use the regular variant for question marks. I know that's hardly a great solution but it seems there's not much else you can do.