I am trying to force small-caps effect on my company's website and everything works great except in Firefox (nevermind version).
Firefox renders Roboto and any other font properly - no problems with language-specific characters as long as font includes the charset, but as soon as I use Roboto Condensed - Firefox renders all chars as if they were small - even big are turned into small-caps, language specific chars are messed - no transform, or transforming small to big...
Website itself is not a problem, any live HTML/CSS tester gives the same effect:
<body>
<p>Lorem Ipsum dołor sił Łamet</p>
<p class="workingInFF">Lorem Ipsum dołor sił Łamet</p>
<p class="notWorking">Lorem Ipsum dołor sił Łamet</p>
</body>
https://jsfiddle.net/12ks6xd8/
Chrome does the job properly, as well as many IEs.
Here a demo that seems to work:
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
p {
font-variant: small-caps;
}
.Roboto{
font-family: 'roboto', sans-serif;
}
.RobotoCondensed{
font-family: 'Roboto Condensed', sans-serif;
}<p>Tested on Firefox 99.0 (64 bit).</p>
<p class="Roboto">Lorem Ipsum dołor sił Łamet</p>
<p class="RobotoCondensed">Lorem Ipsum dołor sił Łamet</p>