Create and use custom fonts for Adafruit_GFX libraries


if you’ve ever wanted to use cool fonts
with your Adafruit libraries but can’t figure out how this is the video for you
over the next few minutes I’ll show you how to use these custom fonts and create
your own the libraries that I’m talking about are these ones here they’re found
in your Adafruit fonts folder and they include things like free mono oblique
free sans 18 so on and so forth but there’s a little to no documentation on
how to use them so the process is quite simple sketch that I have here I’m
starting off my typical adafruit gfx includes my Adafruit ili 9341 include
and notice the include line for the fonts free sans bold 24 PT 7bh this is
one of these files that I just pointed out and of course the line to create the
display object so the first line that you have to have in your sketch is this
one here to include the actual font the second sketch is actually using that fun
now once you have these fonts included just go through your normal display
initialization process set whatever rotation fill your screen whatever and
then call the display dot set font then you’re going to put the actual object
name in the dot H file of that font and notice you have the ampersand to let it
know that this is passing by reference if you’re not sure what that font name
is called just look it up in your dot H file just open up any one of these files
I can even edit it in notepad and right at the very top before the bitmaps
that’s the object name that you’re going to need to call one thing to point out
when you’re using a custom file notice the number of bytes that will be
consumed by memory or do we know animals only have 32 K of memory so you can’t
use this with a new know you’d have to use something like a Omega or my
personal favorite a teensy the one I’m using a 3.2 has 256 K of memory and can
fit this and a number of other fonts easily also the fonts that were
delivered with Adafruit have all the Alpha characters as well a through Z and
upper and lower case this custom font that I’ve built I only needed numbers
now that you’ve seen how to include your own your fonts by these two lines the
set font and the include let’s code and upload the sketch and see what it looks
like also notice how custom fonts are non-proportional what happens if you’re
actually drawing numbers that need to update
notice this example here where the proportional fonts that the very bottom
show that number counting but the custom font seems to overwrite itself makes a
big mess there’s two ways to fix that option number one is just simply
remember the old value and simply paint or print that old value using a back
color of black or whatever the back color is of your display now I set my
fill screen to black so that’s what my back color is the back color or the font
I’m gonna draw in that same back color so basically I paint the old value in
black then I can paint the new value in whatever color I specify now once we
upload the sketch here have a look at the difference nice clean output the
only problem that you have here is you have that little bit of a flicker
someday I’ll figure out how to draw just the text that’s updating but for right
now this is good enough option number two is to draw a black or a filled
rectangle over the old text before you draw the new text either way works fine
it just a matter with if you want to draw a rectangle and figure out where it
goes or simply draw the text in black let’s get some new custom fonts just go
to that website and you can create your own custom fonts the first thing you
need to do is select the correct library version in my case I need an Adafruit
GFX font after selecting that dentist a matter of picking the font and the size
one of my favorite says is orbit Ron so I’m going to pick it plane bold italic
whatever you want let’s do let’s do plane how about a massive 50 pixel
height and hit the crate button in just a few seconds it generates that dot H
file copy this to the clipboard and copy this into notepad and then go up and get
the font name itself orbit Ron blah blah blah underbar 50 and then do a save as
and we’re going to save this into our C Drive x86 Arduino hard work because I’m
using a teensy I’m gonna put this in the libraries folder in the GFX fonts folder
and give it a name of dot H and I may already have done this so pay no
attention to the library already exists once that that is done then include that
like I showed earlier and you’re up and running with
that fun this is a great website here has lots and lots of fonts on here but
what if you want something off the beaten path or some true type font how
do you do that in the Adafruit folder there is a set of instructions on how to
build your own GFX libraries that this font create tool so if we’re going to
font create there is a readme file and we’ll open this and if you follow these
instructions here you can create your own Exe file that will do your own font
creation you do have to download a few libraries and go through some setup but
if you follow this thing exactly you should be able to get your own font
crate dot exe now I’ve already done the heavy lifting and I have got a folder
here called font convert and there’s my font convert Exe and you need to have
this free live free type – 6 DLL now this is included in one of your
downloads in the previous example that I showed you but I’m gonna post this up on
the web so you can get both these files and you have to go through the whole
pain of building your own Exe file so how you create your fonts is for you
young buckaroos you won’t have any idea what I’m typing for you old guys this
should look right at home here going to a command prompt type in CMD or run CMD
however you want to get to a place where you can type in a physical command type
in CMD and bring the brings up this 1985 dost base window looking thing so you’re
gonna drill to your folder where you have your font program is it func
convert type and font convert now without any arguments it will give you a
list of the usage of this thing font convert what is the font file what size
do you want and what is the first character that you want in the last
characters that you want now if you know what your font is great but chances are
you’re not going to know it drill down to your windows folder and your fonts
and finds your favorite font let’s go get trusty old Arial and you can get
black bold italic any font in here that you
want you can grab that so if you want black for instance just right-click get
the properties of that file because you’re going to need to know the font
name actually the file name copy that to the clipboard then go back here and say
font convert then the file name which I’m going to do C Drive backslash
windows fonts and then right click and paste that in what size do you want how
about 40 to 44 whatever and then where do you want this to go so you’re gonna
be well greater than 2 output this to a font name I’ll call it Arial let’s just
give it the actual name itself how about paste call that H and just a
few short seconds it creates this font file for you so if we open that up
there’s a complete font definition with all the pixel information on what gets
turned on what gets turned off all the characters that you would want in there
and it’s even got a cute little name and here puts the C Drive windows in here
else you had to fix that in just a second but it also takes up 32k worth of
memory so what happens if you only want say numbers 0 through 9 how do you
generate a file with just that well if you remember there were those two
arguments on the start and the end for the font generation what you need to do
is bring up some kind of an ASCII editor or an ASCII table and figure out what
the two numbers are for 0 in this case it’s going to be 48 up through 57 so
let’s go ahead and enter those two values into our font generator command
so we’ll enter 48 right here and then 57 being the last argument so this is the
font that I want to convert 44 will be the size that I want 40 is the starting
character 57 is the ending character and that’s where I want the file to get put
out now that we have our font created let’s open it up and have a look
notice the 3 end of the file I’m now only going to take up about 4k worth of
memory much much better but I only have 0 through 9 if I want a decimal point or
a space or a character like an A or G I don’t have that I only have numbers but
that was the goal here to show you how to create just a subset of the fonts if
you’re creating a really large fonts like over 100 character or pixels high
sometimes this number here gets over 255 all this number is is how too much you
advance the next line if you’re using a print line statement I never use print
lines in my graphics displays I only use the print nice control everything with
the control or the the set cursor method so if that’s over 255 just change it to
255 and the other thing because I called my windows for my font creator from a
different folder than my windows it puts the full path in there so just get rid
of get rid of everything up to the Arial statement there’s four or five places
that you have to do this and that way it just looks a little cleaner in your font
folder once that that’s done I’m going to actually copy this name to the
clipboard this Arial all the way up to the bitmaps and I’m gonna save this of
course and I’m gonna go and I’m gonna rename this file that because that’s a
little more accurate because it has the heighth in there and everything else
control that to the clipboard again go back to your fonts wherever you’re using
them because I’m using a teensy it’s in my libraries so on and so forth folder
right in the fonts paste that in place and I’m gonna overwrite it cuz I’ve done
this before and then one last thing is just get that
whole font file name and then go back to your sketch
wherever it happens to be and replace that information in your font include
and your font set font statements now remember I don’t have characters and I
don’t have decimals I only have numbers so let me change that and maybe we’ll
change our text here to make it a little bit more cute so it’ll show red then
we’ll upload that sketch and you’ll see the results of our file pretty cool stuff well I hope you
learned something on how to use custom fonts with your Adafruit libraries
thanks for watching

50 Comments

Add a Comment

Your email address will not be published. Required fields are marked *