0

On all~~ websites, elements that with Roboto as font-family will instead render a courier-like font with missing special characters like ã or ç.

Inspecting one of the elements, it shows both in the Styles and the Computed subtabs:

font-family: roboto, sans-serif

The rendered fonts box shows Courier — Local file (24 glyphs), instead.

Reinstalling all the Roboto family on the system has no impact. Using the inspector to remove roboto from the rule (leaving sans-serif) makes the elements impacted by the rule render correctly.

How can I solve this?

EDIT:

  1. not all websites, actually. It seems related to those that try to use Roboto locally available, instead of, say, Google Fonts.

  2. This is a sample website that goes wrong in Edge and shows correctly in Firefox: https://hospitalsaolucas.pucrs.br/br/institucional-pagina/interna/experiencia-do-paciente

EDIT 2: I didn't do the websites. I'm not a webdev trying to debug websites, I'm a Edge user trying to figure out what's wrong with my system!

  • Please add your `@font-face` rule and a minimal example HTML and CSS of your page. Local fonts can cause rendering issues in some browsers. So it's usually more reliable to strip any `local()` properties. – herrstrietzel Jul 04 '23 at 17:38
  • @herrstrietzel I added some further info. It is a remote website, not something I'm authoring. It is a Edge related problem, as it seems. Firefox renders it correcly. – Fernando D'Andrea Jul 05 '23 at 21:17
  • The website shows "Error 1009, Access denied" when I open it. Please provide a minimal code snippet which can reproduce the issue so that we can have a test. – Yu Zhou Jul 06 '23 at 02:31
  • Sorry, I can't reproduce this error in edge. But you're right `local()` declarations in your `@font-face` rules are infamous for causing conflicts with locally installed versions. So I highly recommend to strip these completely in your `src` properties. BTW it's quite odd the aforementioned characters are substituted – Portuguese is covered by googles/standard "latin" unicode range. You might also test your page in another chromium based browser like opera, brave, google chrome etc. – herrstrietzel Jul 06 '23 at 23:30

0 Answers0