CODEWITHSUNDEEP
firefoxtext-renderingroboto
Kuba Stachu
Kuba Stachu

Reputation: 45

Font-variant: small-caps rendered wrong for Roboto Condensed in Firefox only

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.

Upvotes: 3

Views: 1328

Answers (1)

Riccardo Volpe
Riccardo Volpe

Reputation: 1623

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>

Upvotes: 1

Related Questions