Some accented characters are displayed incorrectly when using Google Fonts

[trollusk]

accents.zip

Preflight Checklist

• [x] I agree to follow the Code of Conduct that this project adheres to.
• [x] I have searched the issue tracker for a feature request that matches the one I want to file, without success.

You must agree to search and the code of conduct. You must fill in this entire template. If you delete part/all or miss parts out your issue will be closed.

Describe the bug

The font of a text box can be changed to a custom font, for example one of the hundreds of available Google Fonts. If there is accented text in the preview on fonts.google.com when selecting a font, the accented character will be displayed correctly for some fonts, but missing ("?") for others.

However, even if a font is selected where the accented character appears correctly in the preview, in most cases the accented character will appear incorrectly in the draw.io app. It will appear as the correct character, but in what looks like a default Times New Roman font.

To Reproduce

Steps to reproduce the behavior:

1. Create a text box, with text that contains a character with a macron such as ī, ā
2. Select the text box, click on the Font dropdown box and choose "Custom".
3. Click the question mark icon to the right of "Google Font". A page at fonts.google.com will appear where you can preview all the available Google Fonts.
4. In the Preview Text box on that page, type in some text containing a character with macron.
5. Scroll through the fonts. Find one that shows the accented character correctly.
6. Go back to the font selection dialog in draw.io, select Google Font, and type in the name of the font (case sensitive). Click "Apply".
7. Observe that (for many of the fonts, but not all) the accented character does not display correctly.

Expected behavior

Accented characters should have the same appearance in the text box, as they do in the font preview.

Screenshots

The Google Font selection page. The lowercase i with macron (ī) is displayed correctly in the "Annie Use Your Telescope" font, but shown as "?" in the other fonts.

Text box using the "Annie Use Your Telescope" font. The lowercase i with macron (ī) is shown in an incorrect font that does not match the rest of the text.

draw.io version (In the Help->About menu of the draw.io editor):

• draw.io version 24.7.17

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Microsoft Edge

[davidjgraph]

Please attach the diagram file, zipped, to this issue.

[trollusk]

Attached accents.zip.

[davidjgraph]

I can repeat, but this font isn't entirely reliable on Google Fonts site. The first time I set the value on https://fonts.google.com/specimen/Annie+Use+Your+Telescope?preview.text=M%C4%81ori I get:

With a broken unicode character. If I refresh I get:

So, even the google site doesn't always seem to get the timing correct. I would just go with a standard font as a workaround.

I can leave it open, but we don't really want to spend days chasing down a timing issue like this.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. See the FAQ for more information.

[alderg]

Seems to work now for Annie Use Your Telescope font. Test Case