Unreadable/corrupted fonts and how to fix them... easily.

[KE7FNS]

So, you loaded a .HMI file into the Nextion Editor and followed the instructions to get it loaded on the Display, and now the fonts look all weird like this.

skew.png (58.47 KiB) Viewed 10286 times

You can do a couple of things to solve this issue, I'll start with the easiest.

download and use this Nextion Editor to load the .HMI files instead.
https://nextion.itead.cc/download/nexti ... p-vLTS.zip

That will allow you to create the .TFT file without the font corruption.


OR=====================================================================================================================

You could just rebuild the fonts, and replace them, Here is how you'd do it.

Step 1.
Open the Nextion Editor and load your .HMI file.
You should see a message saying it was created in an older version.

msg.png (4.59 KiB) Viewed 10286 times

Step 2.
On the bottom left corner of the screen, click the FONT tab, and make a note of each of the fonts you need to recreate. Mark down their NAME and their SIZE.
for this example I'll be rebuilding "ON7LDS 12" which for some odd reason has a font size of 16 (as noted by the h:16), but to keep everything the way it was built I'll just keep the names and sizes the same, but in reality you can name it whatever you would like, it won't matter.

menu font.png (17.25 KiB) Viewed 10286 times

[KE7FNS]

Step 3.

Go to the menu, and select TOOLS, then FONT GENERATOR.

menu.png (8.82 KiB) Viewed 10285 times

Step 4.
Set the size, leave iso-8859-1 the same, and if you would like anti-aliased fonts, leave the checkmark selected, if you want more pixelated fonts remove the checkmark.
Set the font to whatever font you would like to use, ON7LDS selected Consolas for his screens, and PD0DIB seems to have left the font selection the same. If the font you are making is bold, select the bold checkmark.

Under the font name name it, I named it ON7LDS 12, to keep the naming convention the same.

Then select GENERATE FONT

font gen 1.png (10.64 KiB) Viewed 10285 times

Step 5.
Save the font as a file. This step is important because it allows us to save the font we just built to a file to be replaced in a later step.
I set the file name to the same name as what I called it in the previous step, however you need to add the .zi extension.
ON7LDS 12.zi

font gen 2.png (7.41 KiB) Viewed 10285 times

[KE7FNS]

Step 6.
A screen will popup asking you if you would like to add the generated font, select NO. The reason for this is you are going to replace a specific font with the one you just built.

font gen 3.png (2.93 KiB) Viewed 10285 times

Step 7.
Right click on the font you want to replace in the lower left panel of the screen and select REPLACE.

font gen 4.png (29.08 KiB) Viewed 10285 times

Step 8.
Select the font file you saved earlier. (in this example it was ON7LDS 12.zi)

font gen 5.png (4.12 KiB) Viewed 10285 times

That is it. You have now replaced every instance of that font in the entire project. Just repeat the steps for each font size, and bold option, and you'll have a perfectly displaying font on your display.

You can also experiment and load different font types, although I don't recommend it, but you can do whatever you want.

I hope this helps someone out there.

[KE0FHS]

Fantastic instructions. Thank you!

[K3TOM]

Excellent work! What does the other editor do? Is it just an older version that’s compatible with the older hmi files?

[KE7FNS]

Excellent work! What does the other editor do? Is it just an older version that’s compatible with the older hmi files?

Yes, if you don't feel up to rebuilding the fonts, then just open it in the LTS version. If you want to use the new version from now on, rebuild the fonts ONCE and save. One or the other, it is up to you to decide.

Thanks.

[K3TOM]

I found an HMI file I really like but I would like to change the fonts. The issue I'm having is when in the Nextion editor, I can't seem to find the window on the lower left side of the screen which lists the existing fonts. In the menu there is the font editor to create new fonts and I can click on the id number of an existing item in the editor which will bring up the id of the item I whish to change, but I have no way of knowing the previous font size without experimentation and just selecting different sizes and trying them out. Was wondering if anyone knew why I couldn't pull up the font window for the existing fonts. I've tried going into the menu's and seeing if there were a window that was just not selected but I don't think that is the case. Thanks.

[KE7FNS]

I found an HMI file I really like but I would like to change the fonts. The issue I'm having is when in the Nextion editor, I can't seem to find the window on the lower left side of the screen which lists the existing fonts. In the menu there is the font editor to create new fonts and I can click on the id number of an existing item in the editor which will bring up the id of the item I whish to change, but I have no way of knowing the previous font size without experimentation and just selecting different sizes and trying them out. Was wondering if anyone knew why I couldn't pull up the font window for the existing fonts. I've tried going into the menu's and seeing if there were a window that was just not selected but I don't think that is the case. Thanks.

Take a look at the screen grab in Step 7. At the very bottom there is a row of tabs, simply click the tab for Fonts.

[K3TOM]

Oh, now I see. When I first open the editor I see them flash up real quick for about a second or two but then when it loads they disappear. Must have something to do with my screen resolution or something. I'll check it out. Thanks.

[KE7FNS]

Yes, there is a minimum screen resolution for the Nextion editor. I remember seeing it somewhere but now I can't find it.

I know it displays fine at 1920x1080 or higher, and on lower resolutions things begin to be cut off and not fitting on the screen.

I'm pretty sure I could hack it by editing the layout, so what screen resolution are you running and I'll try to find a computer that can display that resolution and see if I can manually edit the layout XML and see what I can come up with.