/ JavaFX / How to integrate custom fonts in your JavaFX application by using CSS

How to integrate custom fonts in your JavaFX application by using CSS

Hendrik on 2014/10/01 - 18:10 in JavaFX

This is one of the CSS tips that were part of my “Extreme Guimaker” talk at JavaOne this year and will show how you can change to font for a complete application or only a specific control by using CSS.
Before explaining the CSS solution I want to show a short example in Java code:


In the code the font of a button is set to “Arial” with a size of 24. All basic nodes in JavaFX that contains a text provide a font property that can be simply used to define a new font for the node. I don’t think that this is best practice because the font is an attribute that styles the application and therefore it should be separated from the application code.

Set fonts by CSS

Fortunately JavaFX supports CSS and therefore we can extract the font specification from the Java code and add it to CSS. I won’t discuss how IDs and style classes in CSS work in this post (If you not familiar with CSS you should have a look in my book). The font of a node can be defined by using the -fx-font-* attributes in CSS. You can find a documentation of these attributes here. Here is an example that defines the font for a button:


If you want to define a global font for all controls in your application you can simply set the font to the .text style class. The Text shape in JavaFX contains this pseudo class by default and all nodes that render a text on screen use the Text shape internally. Here is the css rule that will set the font for a complete application:

Adding custom fonts

In the examples “Arial” is used as the custom font. Normally you can assume that this font will be installed on a client system. But sometimes you want to use a custom font to create a unique UI. In the following example I want to use the Roboto font that is the official font of Googles Material Design. Normally this font won’t be installed on a client system. So if you define the font by CSS and a customer will run the application without installing the specific font on the OS JavaFX will select a system font as fallback and the cool UI of the app is broken. But thankfully there is a good solution for this problem. Since Java 8 JavaFX supports the @font-face rule that can be used to add fonts. As a first step the font file must be added to the application. As best practice the file should be added to the resources folder:
font
Once this is done the font can be defined in CSS by using the @font-face rule:


Now the font will be used in our application even if it isn’t installed on the OS:
font-loaded

Update

As I learned today the shown code isn’t working in Java versions >= 1.8u60. Starting with this version the attribute “font-family” is ignored and you have to use the real name of the TTF.

By example: to use the font “Birds of Paradis” contained on the file demo.ttf. I have to use this CSS file :

18 POST COMMENT

Send Us A Message Here

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

18 Comments
  • 2014/10/18

    Ok. You cought my eye in an instant: Where do I get the material-design-style.css???
    I want to have it! I need it! :-)

    Seriously: Is this something you or someone else Open-Sourced (yet)?
    At the moment I think about (rewriting) an older app into the new design, but to have it done with JavaFX would offer… You know… The whole Single-Source-Goodness…

    Daniel Zimmermann
    Reply
  • 2015/05/29

    Good Tuts … Congratulations

    Angelica Leite
    Reply
  • 2015/06/29

    This somehow stoped working for me with the new JDK? Do you also have this issues?

    Thanks

    robi
    Reply
  • 2015/06/29

    Working on a Mac for example in 1.8.0_05-b13 it’s working fine but in the current 1.8.0_45 it’s not working anymore?

    robi
    Reply
    • 2015/06/30

      Hi,
      can you open a bug at OpenJDK?

      Reply
      • 2015/06/30

        No not until now, I was thinking maybe they changed the way how to include the fonts and I have to change it, but until now I found nothing in the releaseNotes. So if you have same issues I will file a bug. (I don`t wanna file a bug if I’m just doing stuff wrong :-))

        robi
        Reply
  • 2015/08/17

    For URL use ” instead ‘.
    @font-face {
    font-family: ‘Roboto’;
    src: url(“Roboto-Medium.ttf”);
    }

    Mile
    Reply
  • 2015/09/07

    Hi,

    It working on Java 1.8u60 but with a little change. The attribute “font-family” is ignored and you have to use the real name of the TTF.

    By example: to use the font “Birds of Paradis” contained on the file demo.ttf. I have to use this CSS file :

    @font-face {
    src: url(“/ui/font/demo.ttf”);
    }

    .label {
    -fx-font-family: “Birds of Paradise”;
    }

    Thibault M.
    Reply
  • 2016/03/20

    Hello Hendrik

    I have a question and i hope you can help me to resolve one of my problems whit adding external fonts to application. First of all, i tried like you said in this post and is work, but when i install my application on other pc i must install the external font to work. Thank you.

    Madalin
    Reply
    • 2016/03/21

      Hi,
      I think there is a windows bug if the app is running in a path that contains spaces. Can you check this?

      Reply