Search code examples
cssfontsgoogle-font-api

google font ubuntu special characters not displaying correctly


I want to display text in the ubuntu google font. When I create a simple webpage with special characters it doesn't show properly. like this:

touché – ‘çá’

However, trying to demonstrate this in a fiddle I found the exact same code to produce a succesful display.

I've tried adding all subsets like this:

<link href='http://fonts.googleapis.com/css?family=Ubuntu:300&subset=latin-ext,latin,cyrillic-ext,greek-ext,greek,cyrillic' rel='stylesheet' type='text/css'>

with this in css:

font-family: 'Ubuntu', sans-serif;
font-weight: 300;
font-size: 150%;

How do I get my local html file to display these characters correctly as well? here's my fiddle


Solution

  • Your document, when read from the local hard-drive, lacks headers that tell the browser what encoding it's in, and it's guessing incorrectly. Add

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    

    to your document, that should help. Seeing two characters where you intend one to be is often a sign that you get a 8-bit encoding where you want UTF-8 (which encodes these in two octets.)