Creating FreeType Fonts

FreeType fonts are dynamically generated at runtime and can be adjusted to match the scaling requirements of your game on the fly. They have the disadvantage of added complexity and incompatibility with the GWT/HTML5 backend. FreeType fonts can be implemented in your code or loaded from a skin file with a custom serializer.

Create a FreeType Font Placeholder

If you want to create your FreeType fonts in code but also integrate them into your skin file, it will be necessary to add a placeholder.

• Go to Project >> Fonts
• Click on FreeType font
• Enter a name for the font to be used throughout the skin
• Select a suitable preview font
• Click Generate Font

This font will now be selected in your styles. You can add your own preview fonts by clicking on Open Preview Folder and pasting TTF files here. You will need to substitute these fonts in your code. See the steps below.

Replacing a Placeholder Font in libGDX

The following code snippet details how to replace a FreeType font placeholder that you've selected:

skin = new Skin();

FreeTypeFontGenerator generator = new FreeTypeFontGenerator(Gdx.files.internal("some-font.ttf"));
FreeTypeFontParameter parameter = new FreeTypeFontParameter();
parameter.size = 16;
parameter.color = Color.RED;
BitmapFont font = generator.generateFont(parameter);
skin.add("font", font);

skin.addRegions(new TextureAtlas("Skin-Name.atlas"));
skin.load(Gdx.files.internal("skin-name.json"));

The trick is to create your FreeType font first, then load the textures and styles from your Skin.

Using a Custom Serializer

It may be more appropriate to design your FreeType font in Skin Composer so it will appear exactly as you specify in the editor. libGDX does not have this functionality built in, so you'll have to implement a custom serializer to load the font.

• Go to Project >> Fonts
• Click on FreeType font
• Enter a name for the font to be used throughout the skin
• Check mark Use custom serializer and integrate TTF in Skin JSON
• Click More Info...
• Click Copy sample code to clipboard
• Paste the code in the appropriate section of your code

The sample code recognizes FreeType fonts specified in skin files, as they are formatted in Skin Composer, and builds them on the fly. The sample code is repeated here for clarity:

            skin = new Skin(Gdx.files.internal("skin-name.json")) {
            //Override json loader to process FreeType fonts from skin JSON
            @Override
            protected Json getJsonLoader(final FileHandle skinFile) {
                Json json = super.getJsonLoader(skinFile);
                final Skin skin = this;

                json.setSerializer(FreeTypeFontGenerator.class, new Json.ReadOnlySerializer<FreeTypeFontGenerator>() {
                    @Override
                    public FreeTypeFontGenerator read(Json json,
                            JsonValue jsonData, Class type) {
                        String path = json.readValue("font", String.class, jsonData);
                        jsonData.remove("font");

                        Hinting hinting = Hinting.valueOf(json.readValue("hinting", 
                                String.class, "AutoMedium", jsonData));
                        jsonData.remove("hinting");

                        TextureFilter minFilter = TextureFilter.valueOf(
                                json.readValue("minFilter", String.class, "Nearest", jsonData));
                        jsonData.remove("minFilter");

                        TextureFilter magFilter = TextureFilter.valueOf(
                                json.readValue("magFilter", String.class, "Nearest", jsonData));
                        jsonData.remove("magFilter");

                        FreeTypeFontParameter parameter = json.readValue(FreeTypeFontParameter.class, jsonData);
                        parameter.hinting = hinting;
                        parameter.minFilter = minFilter;
                        parameter.magFilter = magFilter;
                        FreeTypeFontGenerator generator = new FreeTypeFontGenerator(skinFile.parent().child(path));
                        BitmapFont font = generator.generateFont(parameter);
                        skin.add(jsonData.name, font);
                        if (parameter.incremental) {
                            generator.dispose();
                            return null;
                        } else {
                            return generator;
                        }
                    }
                });

                return json;
            }
        };

Follow the instructions below to design your font.

Designing a FreeType Font

FreeType Fonts are created from TTF files. You can download free fonts with permissible licenses from Google Fonts.

• Go to Project >> Fonts
• Click on FreeType Font
• Enter a name for the font to be used throughout the skin
• Check mark Use custom serializer and integrate TTF in Skin JSON
• Click the Browse button for TTF Path and select the source font
• Choose a characters preset or type in the characters that you want to be generated in the bitmap font
• Choose the font settings that suit the appearance of the text that you desire

For more details on the options available, see the libGDX wiki.

Foreign Language Characters

To support foreign language characters, it is advised to use the character text file technique. This file can be created in any text editor to define what characters you want to include in your bitmap font. Follow the steps below to use Notepad on Windows:

• Open Notepad
• Type in all the characters you want to include in your font
• Go to File >> Save As...
• Choose save path and change the encoding listed below to UTF-8
• Click Save
• In Skin Composer's Bitmap Font editor, choose Load from file (UTF-8) from the Characters select box
• Find and select the text file that you created in the previous step

Please note that you also have to use a TTF that supports all of the characters that you defined in the text file.

Saving Settings

You can save the settings you have made to apply to future fonts. Click Save Settings and choose a file path. You can then click Load Settings in the Bitmap Font or FreeType Font editors to load your settings.

Saving Font

Click Generate Font to use the font throughout your skin. If you wish to make changes to this font in the future, click the settings button for the specific font in the Fonts dialog.