Using True Fonts For Your Libgdx project

Josh Libgdx Leave a Comment


I just spent a good 20 minutes trying to figure out how to use my own custom fonts for my games so this should is a short little guide on how to use a font file (.tff) to create and use a font in LibGdx. I’m sure there are other ways, but here’s how I was able to do it.

Step 1: Find Your Font

First thing we have to do is figure out what type of font do you want to use. A great resource you might want to use would be FontSquirrel.

Download the file and put it in your asset folder. I highly recommend that you create a fonts folder for you to organize all of your font types.

Note that there might be multiple types of styles for the font that you downloaded (bold, italicized, underlined, and a combination of them)

Step 2: Create a BitmapFont Object

Now that we have the font we want, our next step is to use the LibGDX FreeType extension to help us transform our .ttf file into a usable BitmapFont object.

At this point you might have a realization: “Crap, I didn’t choose to include FreeType when I created my project”. If that was you (and it was me), no worries, you can always add them into your gradle project.

You can see how to add gradle dependencies here. But to summarize what you have to do.

Open your gradle script and add these lines to each respective section so that you can download the dependencies you need:

Core:

compile "com.badlogicgames.gdx:gdx-freetype:$gdxVersion"


Desktop:

compile "com.badlogicgames.gdx:gdx-freetype-platform:$gdxVersion:natives-desktop"

Android:

compile "com.badlogicgames.gdx:gdx-freetype:$gdxVersion"
natives "com.badlogicgames.gdx:gdx-freetype-platform:$gdxVersion:natives-armeabi"
natives "com.badlogicgames.gdx:gdx-freetype-platform:$gdxVersion:natives-armeabi-v7a"
natives "com.badlogicgames.gdx:gdx-freetype-platform:$gdxVersion:natives-arm64-v8a"
natives "com.badlogicgames.gdx:gdx-freetype-platform:$gdxVersion:natives-x86"
natives "com.badlogicgames.gdx:gdx-freetype-platform:$gdxVersion:natives-x86_64"

iOS:

compile "com.badlogicgames.gdx:gdx-freetype-platform:$gdxVersion:natives-ios"

HTML Dependency:

Unfortunately HTML doesn’t seem to support FreeType

Now once you have your dependencies, you have to create your font type. You do that by using the FreeTypeFontGenerator class that we just installed.

The full FreeType documentation is here, however to summarize what you have to do:

FreeTypeFontGenerator generator = new FreeTypeFontGenerator(Gdx.files.internal("fonts/myfont.ttf"));
FreeTypeFontParameter parameter = new FreeTypeFontParameter();
parameter.size = 12;
BitmapFont font12 = generator.generateFont(parameter); // font size 12
pixelsgenerator.dispose(); // don't forget to dispose to avoid memory leaks!

And there you go! You now have a BitmapFont object that you can use to create an instance of a text.

There are some nifty things you can do with the parameter object we use to create the BitmapFont. Among many things, you can change the:

  • Font size
  • Color
  • Borders
  • And many more

So mess with the parameter object a bit and then ago on ahead and create your BitmapFont object

Step 4: Use Your BitmapFontObject

Now normally when you create your game, you would store BitmapFont object in an AssetManager class, however for this case I’m just going showcase everything together.

For my intended purpose, I needed to add Text to my objects in Scene2D. I was able to accomplish this by creating a new UI object that extends Actor. And within the Actor class I extended, I overrode the draw method and drew my text:

public class HeaderTextUI extends Actor {
    private String text;
    private BitmapFont bitmapFont;

    public HeaderTextUI(String text) {
        FreeTypeFontGenerator generator = new FreeTypeFontGenerator(Gdx.files.internal("fonts/turtle.ttf"));
        FreeTypeFontGenerator.FreeTypeFontParameter parameter = new FreeTypeFontGenerator.FreeTypeFontParameter();
        parameter.size = 12;
        bitmapFont = generator.generateFont(parameter);
        generator.dispose();
        
        this.text = text;
        bitmapFont.getData().setScale(0.4f, 0.4f);
    }

    @Override
    public void draw(Batch batch, float parentAlpha) {
        bitmapFont.draw(batch, text, getX(), getY());
    }
}

Note: Remember that if you use your own Actor that when you add it, you have to set your own Width and Height otherwise you won’t see anything

This works even without Scene2D, you just need a Batch object to help render your font.

I hope this has been useful for you!

Subscribe To Our Weekly Newsletter!
Like these coding articles? Join my mailing list for the latest updates and influence the code that I write!
We hate spam. Your email address will not be sold or shared with anyone else.

Leave a Reply

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