Problem displaying german special characters like “ß
stuff, webdev
January 25th 2015 (4 years ago)
One of my german clients had a problem with german special characters, most importantnly with letter “ß” – after changing a design for the website, the “ß” was automatically changed to “ss”.

First thing, that comes to mind, is not properly set charset on the website, which on was:
<meta http-equiv="content-type" content="text/html; charset=utf-8">
So, investigating further i noticed, that conversion from “ß” to “ss” was only done for uppercase letters (in the CSS).

As it turned out, the font used in the design didn’t have a special characters for uppercase letters, only for small ones, so, most of the browsers seeing, that there is no proper character to display, simply change it to “ss”.
I was actually suprised, as the font used in the design was one of the Google Fonts: Open Sans.
I assumed, that Google fonts have the support for all characters used by any nation…Anyway, problem seems to be solved after changing to different font.
The irony here, is that I also use Open sans on my website, bu fortunately, I don’t need to use german special characters so much :)


If you ever have this problem, check the fonts loaded with the website, that’s it :).