Search code examples
htmlcssfontsgoogle-font-api

Custom google font error in HTML

I have a blog where I use custom fonts from Google Fonts in each and every text of the <body> element, but whenever there is an inverted comma or a double inverted comma in my text, it is not shown as it should be - it is replaced by an unknown character.

I had even looked into the font and there is the character support for the inverted commas.

Solution

  • I don't think this has anything to do with your font.

    If you look at the source code you will see the characters already are broken there:

    screenshot of sourcecode

    This rather is a problem of your encoding. Your site is UTF-8, but the characters seem to be non-UTF-8. You either need to use UTF-8 characters or change the encoding of your site. (1st option is preferable) If you change the site encoding to Windows-1252 (which is automatically suggested by Chrome based on the content) everything seems fine:

    enter image description here

    The question is how did you create this text? Maybe in Word and then copy and pasted? Or is your blog backend not UTF-8?

    Also note there are two different characters: ’vs ´.