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

All things relating to the Nextion Screen(s)
Post Reply
KE7FNS
Posts: 222
Joined: Wed Apr 17, 2019 11:11 pm

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

Post by KE7FNS » Sun Jul 28, 2019 7:50 am

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
skew.png (58.47 KiB) Viewed 309 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
msg.png (4.59 KiB) Viewed 309 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
menu font.png (17.25 KiB) Viewed 309 times

KE7FNS
Posts: 222
Joined: Wed Apr 17, 2019 11:11 pm

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

Post by KE7FNS » Sun Jul 28, 2019 7:58 am

Step 3.

Go to the menu, and select TOOLS, then FONT GENERATOR.
menu.png
menu.png (8.82 KiB) Viewed 308 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
font gen 1.png (10.64 KiB) Viewed 308 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
font gen 2.png (7.41 KiB) Viewed 308 times

KE7FNS
Posts: 222
Joined: Wed Apr 17, 2019 11:11 pm

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

Post by KE7FNS » Sun Jul 28, 2019 8:07 am

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
font gen 3.png (2.93 KiB) Viewed 308 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
font gen 4.png (29.08 KiB) Viewed 308 times
Step 8.
Select the font file you saved earlier. (in this example it was ON7LDS 12.zi)
font gen 5.png
font gen 5.png (4.12 KiB) Viewed 308 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.

User avatar
KE0FHS
Posts: 915
Joined: Wed Apr 11, 2018 8:40 pm
Location: Colorado, USA
Contact:

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

Post by KE0FHS » Sun Jul 28, 2019 2:52 pm

Fantastic instructions. Thank you!
73, Toshen, KE0FHS
Playing with Pi-Star (unofficial notes about setting up and using Pi-Star):
https://amateurradionotes.com/pi-star.htm

K3TOM
Posts: 13
Joined: Fri May 31, 2019 2:08 am

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

Post by K3TOM » Tue Aug 06, 2019 6:49 am

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

KE7FNS
Posts: 222
Joined: Wed Apr 17, 2019 11:11 pm

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

Post by KE7FNS » Tue Aug 06, 2019 8:39 am

K3TOM wrote:
Tue Aug 06, 2019 6:49 am
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
Posts: 13
Joined: Fri May 31, 2019 2:08 am

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

Post by K3TOM » Tue Aug 13, 2019 8:31 pm

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
Posts: 222
Joined: Wed Apr 17, 2019 11:11 pm

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

Post by KE7FNS » Tue Aug 13, 2019 10:28 pm

K3TOM wrote:
Tue Aug 13, 2019 8:31 pm
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
Posts: 13
Joined: Fri May 31, 2019 2:08 am

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

Post by K3TOM » Tue Aug 13, 2019 11:07 pm

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
Posts: 222
Joined: Wed Apr 17, 2019 11:11 pm

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

Post by KE7FNS » Wed Aug 14, 2019 12:59 am

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.

Post Reply