Font breaks by using text-transform: uppercase;
Baedda opened this issue · comments
I have a problem with using Rajdhani in combination with the css attribute text-transform: uppercase;. The bug can be seen in the documentaion on Google Fonts:
https://fonts.google.com/specimen/Rajdhani
If you assign text-transform: uppercase; with developer tools to an element that displays the font some strange behaviours appear. Sometimes the uppercased letters are replaced with serif fonts and sometimes some letters appear smaller than others.
It's horrible to only describe what you see with vague language but not provide screenshots. But anyway I guess I already know what the problem is here.
Afaik, CSS text-transform: uppercase;'s mechanism has nothing to do with fonts. Browsers simply replace original characters with corresponding uppercase characters for displaying.
I suppose the issue you encountered is because Google Fonts by default supplies subset fonts to web pages. And when you want to display some more uppercase characters without reloading (or re-requesting font files from Google Fonts), the subset fonts simply don't have them.
Thank you for the response and the clear description of the behaviour what happens when we replace the style on the Google Fonts website.
Still open is our issue that the letters in the font appear in different sizes after using the css attribute „text-transform: uppercase;“. This behavior seems to be depending on the font size. For example: 14px looks good – 19px too – but every size between 14px and 19px is not good. We have attached some examples out of a current project. As you can see the letters seem like they “dancing around”.
It would be great if you could take a second look on that problem! Thank you very much in advance!
This looks like a hinting issue. If this issue is only obvious in smaller sizes (below 20 px or so) but not large sizes (say, 50 px), then it's a hinting issue.
We don't do manual hinting and can only try to influence the hinting result of Google Fonts ttfautohint solution. I can't promise a resolution soon.