Accented letters

Hi everyone,

I have a problem with accented letters disappearing on android devices (but visibile from anywhere else). I’ve changed the fonts that were provided to me (first is was BentonSans, uploaded in elements as custom font and after it was Roboto, from Google Fonts) and they both are supposed to have accented letters (I can correctly see the accented letters from Mac, PC, notebooks and IOS mobile, but not from android devices).

How can I solve this, hopefully without the need to change the font?

Can you post a link to the website so we can take a look?

www.scuolasantadorotea.eu

Thanks for the link. The issue isn’t Elements or the text encoding, it’s the font being served to Android (I think).

On Android, the font file that’s loading might not include the required accented glyphs (usually because only a latin subset or specific weights were uploaded). When Android can’t find a glyph, it simply renders nothing.

The fix is to re-add the font and make sure:

  • You include latin-ext support
  • All used weights/styles are uploaded
  • You don’t mix Google Fonts and custom font uploads

If you temporarily switch to a system font, you should see the accents return on Android, which confirms it’s a font file coverage issue.

1 Like

@Gianluca73 Hi, download the fonts to be used from here: google webfonts helper and make sure latin-extended is selected when downloading. Then use the fonts as custom, self hosted fonts in Elements.

1 Like

Thank you, Dan.

Very quick reply!

I’ll check that no custom fives remained anywhere on the site from the previous edition (now there should only be Roboto). Btw…. Is there quick way to check this or do I have to go through any text component one by one?

Also if I use Roboto as a Google font (added from the themes settings) how can I be sure it’s using Latin ex?

Last but not least…I’ve added this CSS to the code: is it useful in any way or is it better to get rid of it at all?

@importurl('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap&subset=latin-ext'); html, body { font-family: 'Roboto', sans-serif !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

Thank you.

I’ve downloaded it and now I’ll go through the substitution process.
I wish there was a faster way though :grin:

That’s what the Theme Studio is for! You can just update the font in there and it’ll update throughout your entire site…