Customize Your ESP32 LCD with Any Font Imaginable

hello I hope you are fine uh in my recent videos you probably notice that I'm using some nice fonts and I promise that I will also teach you how to use any font that you have installed on your PC here I have few examples this is on L go the display S3 S3 AMOLED and this is nice font graffiti font I love this AMOLED because look how sharp it is and here I have also this counter with this font I forgot the name of that font I will share these two examples but in this tutorial I will use normal and cheaper the display S3 because I think more people own this board this method will work on TFT SPI library and Lan Library so let's get started okay let's learn how to use any font you have installed on your PC first we need some font file I have to use the font.com site I will put these links in description so first I need font I like on on this site you can find like million fonts but I love to search in this section science fiction and let's see what have what we have here okay let's write this Sega font so first we need to download font I will extract that font from zip file and I will install it right click and install now I have font installed in my PC I can check in in word for example and here it is it works and now we need to make convert it to format that can be read by tfpi library for that you will need process process processing software and you can download it here so you will need to install processing software and run it and here it is I'll go I'll save my I will go to first save s and I will save my sketching font tutorial I will remember this name 2 31106 then I will go on tools create font and here I need to find my Sega font and here it is Sega and let's try size I don't know 52 and I will choose okay so now in my folder I have my sketch folder and in data folder I have my font file now I need this site I will put this also in description so this site will convert our vlw font to to Binary so in this case this button is on Croatian language but yours will be on your language so choose file my font and I will choose copy output to clip clip port and now I can go to arduin ID so this is basic sketch we include a tfti HPI TFI liary Constructor Sprite screen in it rotation will be horizontal we created full screen Sprite and this part is to set brightness to lower value and now I will I will make a draw function which will in each cycle first it will delete whole screen not delete it will fill it with black and at the end of cycle we will have Push Sprite on 0 0 coordinates in Loop we will call only draw and now we need four font so our font data is copied to clipboard now we need header file which will which will contain this binary data so new tab Sega font. a H H is really important and now we have Sega font. H and I will paste everything here so there are lots of data at the end you will need to close this with this bracket I don't know how to call this on engl English and on the beginning and on the beginning I need to add this const program and again this Open Bracket I will change this to Sega Sega font so name of the array Open Bracket and closed of course we need to include our Sega font. H and now we need to we can add this here Sprite load font and we need and we need to use this name here which is again say a font and that's it I will I will use this also Sprite set text four so text will be centered in the middle default value is zero when text is centered in top left corner but I will Center it in Middle because it is easiest for me right draw string and in string we will say esp32 and and we want in the middle of the screen so 320 divide on 2 is 160 and this divide on two is 85 sorry 85 and that's it our code is finish I will also I will also share this code so we can choose right port and I can upload my Sketch color will of course be color of text will be white of course default and here is result it seems that I choose font which don't have numbers defined like like let's check here yes there are only letters and capital so next time I will need to be more careful when I choosing font but instead of esp32 I can try to write Volos I hate that name okay much better so in short steps first you will need to find install and find download and install any font then you will need to processing software you will go to tools create font you will choose any font you have installed on your PC or Mac here you will choose size and you will go okay then you will go to this site you will choose file you want you you will copy output to clipboard you will make new tab pixel you will copy this at the end you will add these two and at the beginning you will add pixel and of course you will need to include this here and use Sprite load font and here it is now we have same example just with that new pixel font we created in second first example I hope this was this will be helpful to you because I think projects looks way more better with nice fonts thank you have a nice day bye

Channel: Volos Projects

Views: 12,936

Keywords:

Id: 4zYaIJxEYaM

Length: 14min 49sec (889 seconds)

Published: Tue Nov 07 2023