Loading custom font using JavaFX 8 and css

Question

The Problem

I'm creating a Super Mario themed css style sheet for my application, and I want to change the font of my buttons to a custom font called Press Start 2P, which is the pixelated font used in the NES Mario games. However, my application's not loading the font for some odd reason.

CSS code:

.text
{
    -fx-font-family: "Press-Start-2P";
}

.button
{
    -fx-background-color: transparent;
    //-fx-text-fill: rgb(255, 255, 255);
}

@font-face
{
    font-family: Press-Start-2P;
    src: url("PressStart2P.ttf");
}

When I run the application, it gives me this message:

Apr 25, 2015 8:22:32 AM com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged INFO: Could not load @font-face font [file:/C:/Users/Ahmad%20El-Baher/Documents/Programming/Java/Integrative%20Project%20Semester%204/trunk/build/classes/res/styles/PressStart2P.ttf]

How do I make my application load my font properly?

Answer 1

Note that the below will work only with Java versions >= 1.8u60

I was having the same issues. The way to load CSS in JavaFX 8 is by setting the font face file and then using the Font Name as reference which can be found by previewing the font.

The font file is relative to the CSS. I have the root set with the font, but you can remove that and leave it per node based.

CSS code

@font-face {
    src: url("freeuniverse2.ttf"),
}

.root {
    -fx-background-color: gray;
    -fx-font-family: "Free Universe 2";
}

#window {
    -fx-border-image-source: url("images/windowfill.png");
    -fx-border-image-slice: 17 6 13 6 fill;
    -fx-border-image-width: 17 6 13 6 ;
    -fx-background-color: gray;
}

.text {
    -fx-text-fill: white;
    -fx-font-size: 16px;
    -fx-font-family: "Free Universe 2";
    -fx-background-color: transparent;
}

.pane {
    -fx-border-image-source: url("images/windowfill.png");
    -fx-border-image-slice: 17 6 13 6 fill;
    -fx-border-image-width: 17 6 13 6 ;
    -fx-background-color: gray;
}

.vbox {
        -fx-border-image-source: url("images/windowfill.png");
    -fx-border-image-slice: 17 6 13 6 fill;
    -fx-border-image-width: 17 6 13 6 ;
    -fx-background-color: gray;
}

#title-text {
    -fx-text-fill: white;
    -fx-font-size: 36px;
    -fx-font-family: "Free Universe 2";
}

.label {
    -fx-text-fill: white;
    -fx-font-size: 16px;
    -fx-font-family: "Free Universe 2";
    -fx-background-color: transparent;
}

Font File Preview(Below you can see the real Font Name)

Answer 2

See if your CSS file and the TTF file are in same directory. According to your code, src: url("PressStart2P.ttf"); they should be in same directory.

Also, try replacing

@font-face
{
    font-family: Press-Start-2P;
    src: url("PressStart2P.ttf");
}

with

@font-face
{
    -fx-font-family: 'Press-Start-2P';
    src: url('PressStart2P.ttf');
}

Answer 3

I know it's kinda late . But for those people who still in need, I think the problem here is that you have spaces in your project name. Try to rename your project with IntegrativeProjectSemester4