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
– GOXR3PLUS, Commented May 22, 2016 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
– gameCoder95, Commented Mar 21, 2017 at 15:57

GOXR3PLUS · Accepted Answer · 2016-09-22 04:08:27Z

18

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)

edited Sep 22, 2016 at 4:08

GOXR3PLUS

7,31510 gold badges52 silver badges105 bronze badges

answered May 22, 2016 at 14:14

Mr00Anderson

8528 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

M. le Rutte Over a year ago

Using the same font-family name as is inside the font information is vital, otherwise the CSS will not use the font.

Dushyant Bangal · Accepted Answer · 2015-07-14 09:30:01Z

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, 2015 at 9:30

Dushyant Bangal

6,40310 gold badges53 silver badges86 bronze badges

1 Comment

Dushyant Bangal Over a year ago

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.

lala lala · Accepted Answer · 2017-03-20 04:13:16Z

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, 2017 at 4:13

lala lala

112 bronze badges

Comments

Tharindu Sathischandra · Accepted Answer · 2020-09-18 19:57:13Z

0

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!

edited Sep 18, 2020 at 19:57

answered Sep 18, 2020 at 19:33

Tharindu Sathischandra

2,0521 gold badge19 silver badges38 bronze badges

Collectives™ on Stack Overflow

Loading custom font using JavaFX 8 and css

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related