Exporting problem: garbled characters in browser

1

I presume I am doing something wrong.

I had a file, X.ttf, that seemed to work fine (which I did not create). I wanted to make changes to the file, so I opened a copy of the file named backupX.ttf in Glyphs 3. I made changes to some individual glyphs in the file.

I then exported the font as a TrueType file. I did not change any default settings. This created a file X.ttf (rather than backupX.ttf) with the font name of X.ttf.

In a text editor opening the new X.ttf it seemed to work. But when I tried to open an HTML file that used CSS to open the file X.ttf, I got garbled text. The text looks a bit like this:

Screen Shot 2023-04-02 at 11.08.13 PM
Screen Shot 2023-04-02 at 11.08.13 PM1264×78 6.13 KB

This should say “Reciprocal promotions (Babson theme)”.

It is definitely possible this is some user error going on here. Alternatively, is there some simple explanation that could be the problem? Maybe misusing export to TrueType somehow? I checked with Inspect on Mac/Chrome and the browser seems to using the correct font.

For instance, maybe the CSS is trying to use italic or something on the font and that is confusing it?

This font uses a lot of unusual dingbats and math symbols, but the issues arise on alphanumeric ascii letters.

2

It looks like a font cache problem: Eliminating font cache problems | Glyphs

When making changes on a font, it is a good idea to change the font name to avoid conflicts. You need to check Font Info > Font and Exports to find all instances of the font name and change them accordingly.

3

For testing in a browser, do not install the font. Better to export a Test HTML next to the .otf or .ttf. There are two mekkablue scripts Test > Webfont Test HTML (for static fonts) and Variable Font Test HTML (for variable fonts) that do exactly that. Run them right after you exported the font.

4

Thanks everyone, very useful information. It turns out, however, after much additional testing and head scratching, that the bizarre characters appear in the Text Preview pane within Glyphs itself (but not in the text view in glyph edit mode). I will make another thread about this, since it is not related to export.