# White background on BitMapFont

I've tried placing a white "background" on a font that is being rendered with LibGDX, with no success.

I'm using the font.draw to draw the loaded font on the screen, but every way that I tried, the font only contains a black border and is transparent on "the inside".

I'm using Hiero to make the .fnt from .ttf files that libGDX uses to render the fonts. Is there anyway I should modify from this application to make a font have a white background and not be transparent?

I would like to display the font the second way, although that display that you are seeing is just from the Hiero app preview option (with specific background).

• This is a bitmap font you are using, correct? Mar 26 '14 at 14:42

Had a similar problem. Couldnt find anywhere the solution, only in libgdx irc channel. Huge thanks to jeffol on #libgdx @ freenode

So to change text colors the text outputted from Hiero (i used BMFont) should be white. This is done in export settings - you need to set higher bit depth, and then you can tinker with r g b values. What worked for me was the "outlined text with alpha" preset. Note that you set the outline not by drawing it into your font file, but in the font settings in BMFont.

Because this problem was bugging me so long, i actually quit several times while looking for a solution, i made a guide to solve this.

Here are the steps:

1)Take some font, note the outline thickness. The bigger you set the font size the more the outline thickness you should set.

2) Bit depth 32, preset - outline text with alpha. The settings become like this:

3) Press V to preview font, should look similar to this.

4) My code:

Assets class:

private static AssetManager asm = new AssetManager();
private static String fontPath = "font.fnt";


load() that is called at app startup:

asm.load(fontPath, BitmapFont.class);
font = asm.get(fontPath);


initialization:

font = Assets.font;
font.setColor(1f, 1f, 1f, 1f); //you can probably also use (Color.WHITE)


render:

font.draw(batch, score, camera.position.x-font.getBounds(score).width/2, 730);
//the x coord is adjusted depending on the text length,
//so for example the text is centered always


5) font in game works! :)