Mia Mia - 3 months ago 27
CSS Question

Google Fonts - CSS - some characters are not working

I've imported the (in)famous open sans to my CSS. Everything was fine at first.
However, today I noticed that some of the characters

(şğü)
are not being displayed properly in Firefox. They work fine in Internet Explorer and Chrome, but they're being replaced by the default font in Firefox.

I was thinking, this should be a quick-to-solve issue. Any ideas?



@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
p {
font-family: "Open Sans";
font-size: 4em;
}

<p>Example şğü.</p>




Answer

By default, many Google fonts support Basic Latin repertoire only (effectively Windows Latin 1 set); this covers e.g. ü but not the Turkish letters you are using. The repertoire can be selected with checkboxes in the UI of Google Fonts, but this is rather unnoticeable. In this case, you need to add the parameter subset=latin,latin-ext:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic&subset=latin,latin-ext);

p {
    font-family: "Open Sans";
    font-size: 4em;
}
<p>Example şğü.</p>