When Importing a Google font, outsystems increases the letter-spacing

When importing a google font in outsystems the letter-spacing increases.

I imported DM Sans from google fonts with the @import rule, the font is showing on our Mobile app but it doesn't look as it's suppose to.

 The only way it looks close to normal is if I add in 

    letter-spacing: -0.5px;


Does anyone know why this would happen or how to prevent it without using negative letter-spacing?

Thank you in advance.

Hi Megan,

"it doesn't look as it's supposed to" is fairly subjective. You may say "it doesn't look like I expect it to" ;). It is possible that there's a specific letter-spacing defined for some styles of OutSystems UI. To check this, start the app in the browser and check with your browser tools (F12) what the spacing is of the text that looks wrong, and what causes it.

It doesn't look anything like the font when using the font anywhere(web/word/adobe) else.

Letter-spacing is normal

Font-stretch is normal  

I've debugged on web and on our Mac through my app and everything is normal.


Please see attached the difference between the web app and the mobile app on my phone

EDIT: This only happens on iOS not Android

Solution

SOLVED:

As it was only an iOS issue, I could research a bit better

Google Fonts gave the import rule as:

@import url('https://fonts.googleapis.com/css?family=DM+Sans:500&display=swap');

Rather than this 

@import url('https://fonts.googleapis.com/css?family=DM+Sans:500');

Which fixed the problem.




Solution

Great you found the solution :). I was going to say that it indeed looked like the font didn't get loaded at all, rather than stretched.