Hi Radzen Team
I'm experiencing an issue with TextStyle on RadzenText when using Unicode characters. Applying TextStyle results in font errors, as shown in the picture. How can I resolve this?
<RadzenText Text="Quản lý nhiệm vụ khoa học công nghệ!"
Style="font-family: 'Roboto', sans-serif; font-size: 48px" />
<RadzenText Text="Quản lý nhiệm vụ khoa học công nghệ!" TextStyle="Radzen.Blazor.TextStyle.H2"
Style="font-family: 'Roboto', sans-serif; font-size: 48px" />
Hi @vthanhweb,
Is it reproducible in the online demos - Blazor Text Component | Free UI Components by Radzen? You can click on Edit Source and paste your code snippet to reproduce.
I tried it and this is what I see:
If you cannot reproduce it online, perhaps you don't have the Roboto fonts properly loaded for some reason.
What happens if you add font-weight: 400 to your styles?
We think we've found the issue - the Roboto font shipped with Radzen.Blazor contains the latin characters subset only. The unicode characters that you use are not part of this subset and they are rendered using the fallback sans-serif font available on your device. The font-weight: 400 property just makes the Roboto's font-weight similar to the font-weight of the available default sans-serif font.
We'll make sure we ship an extended character support version of the font with our next major version v5 coming soon.
Until then you can use this tool to generate a font that contains the desired character subset. The tool will also generate the styles that you need to add in your site.css - just follow the steps and make sure you configure properly the paths to the new font files.
Hi
I try with google font, it show below picture.
<link href="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" rel="stylesheet">
Can I use with google font?
Of course, you can.
Thank you for your support!
