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?

Have in mind that if your css file in in folder (Styles) then your code will work if the .ttf is in the folder Styles.Other way you have to go the path to find the file.For example if .ttf is in folder (Parent) which is parent folder of Styles then the path has to be in css(src: url("../PressStart2P.ttf"); which(..)means i go one folder back.This is just an example. — GOXR3PLUS, May 22 '16 at 18:02
Hello @Underbalanced! So very sorry about leaving you, along with everyone else here, hanging. I remember I had solved this issue a long time ago, but I completely forgot about this question I posed, so I only remembered recently when you commented. Unfortunately, I don't remember how I solved this issue, so I don't know what to do with this question of mine... — gameCoder95, Mar 21 '17 at 15:57

score 18 · Answer 1 · edited Sep 22 '16 at 04:08

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)

Using the same font-family name as is inside the font information is vital, otherwise the CSS will not use the font. — M. le Rutte, Jan 22 '17 at 15:16

score 1 · Answer 2 · answered Jul 14 '15 at 09:30

1

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');
}

answered Jul 14 '15 at 09:30

Dushyant Bangal

6,048
8
48
80

The answer is based on the similar issue I faced once. There are lots of reasons why one can face this issue, my answer is just for one of the scenarios. The downvote in unjustified. – Dushyant Bangal May 22 '18 at 10:26

score 0 · Answer 3 · answered Mar 20 '17 at 04:13

0

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

answered Mar 20 '17 at 04:13

lala lala

11
2

Tharindu Sathischandra · Answer 4 · 2020-09-18T19:57:13.070

I was able to add Google Fonts.
As an example,

/* TOP OF THE FILE */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?
family=Ranchers&display=swap');

.my-robot-label{
    -fx-font-family: 'Roboto';
}

.my-rancher-label{
    -fx-font-family: 'Ranchers';
}

Note: This was the only way I could successfully add an external font

PS: But still this will not work after packaged!

Loading custom font using JavaFX 8 and css

4 Answers4

Linked