Set custom font in JavaFX 2

Maybe you would like to set custom fonts to your application for various reasons: make it touchy, be compliant with your corporation with corporate font, and so on. In JavaFX it’s pretty easy to change the font of a component. You can use the Labeled#setFont(Font f) method in your code, or define the -fx-font-family in your CSS. But what about custom fonts?

Load the font

The first thing you have to do is load the font. This is done like this:

Font.loadFont(SomeApp.class.getResource("/com/twasyl/someapp/font/MyFONT.TTF").toExternalForm(), 12);

This loads your font, which has a family, let’s say Thierry Font. This method makes the font available in your graphics environment and you just have to use it whenever you want. I like to place this code in my Application class, especially in the init method, so the I’m sure the font is loaded before any other treatment (especially before any labeled element is rendered). Let’s write this code:

public class SomeApp extends Application {

  @Override
  public void start(Stage stage) throws Exception {
    // Do some stuff
  }

  @Override
  public void init() throws Exception {
    super.init();

    Font.loadFont(SomeApp.class.getResource("/com/twasyl/someapp/font/MyFONT.TTF").toExternalForm(), 12);
  }

  public static void main(String[] args) {
      SomeApp.launch(args);
  }
}

Use your custom font

Punctual use

Either in your FXML or CSS code, you can now define the -fx-font-family with the value Thierry Font.

<Label style="-fx-font-family: 'Thierry Font'" />

This label will use the font, but what about the others elements? Do I really have to do this on ALL elements? Of course not …

General use

The interesting part is you can define your font for the whole application by default. Indeed in your CSS you just have to do this:

.root {
  -fx-font-family: 'Thierry Font';
  -fx-font-size: 15pt;
}

By default every labeled element will use your custom font. And of course you can change the font for a particular label again, using the style attribute for example.

About these ads

2 Responses to Set custom font in JavaFX 2

  1. Pingback: JavaFX links of the week, January 28 // JavaFX News, Demos and Insight // FX Experience

  2. Instead of loading the fonts programatically you can also bundle a META-INF/fonts.mf file with your applications. Even though this mechanism isnt’ really well documented (a shame, if you ask me!) it’s really elegant and quite useful.

    I wrote a blog post about font loading a few days ago that also deals with the creation of the META-INF/fonts.mf file: http://cathive.blogspot.de/2013/01/using-custom-fonts-in-javafx-apps.html

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: