How do I set custom fonts from css in JavaFX?

Question

I have added a custom font to my project in the src/main/resources folder (RobotoMono.ttf). Then I try to load it from my css file like this:

@font-face {
    font-family: 'RobotoMono';
    src: url('RobotoMono.ttf');
}

but when I try to set this font to something it doesn't work:

.column-header-label {
    -fx-label-padding: 0;
    -fx-text-overrun: clip;
    -fx-font-family: 'RobotoMono';
}

If I set the font to something which is present on my system I can see that the font changes but the one included by me does not work.

What am I doing wrong?

Answer 1

In your css, you have to specify a font-face with a url. Then, in your css element you have to use the name of the font from inside the ttf file, not the name of the font file itself. For instance, if you open the ttf file from Windows you see "Roboto Mono".

@font-face {
    src: url('RobotoMono.ttf');
}

.column-header-label {
    -fx-label-padding: 0;
    -fx-text-overrun: clip;
    -fx-font-family: 'Roboto Mono';
}

Answer 2

You declared where the font exists using the src property:

src: url('RobotoMono.ttf');

This is an instruction to look for RobotoMono.ttf in the same folder where the CSS file exists. If you created your JavaFX application using Maven, the style files should be in

src/main/resources/styles

So make sure the project's folder structure looks like: