CODEWITHSUNDEEP
cssfontsjavafx
syscreat
syscreat

Reputation: 573

Specifying external font in JavaFX CSS

Is it possible to specify a font using CSS in JavaFX application? I have an FXML scene and the corresponding CSS file. In Java code, it's possible to specify a font using the setFont method:

text.setFont(Font.loadFont("file:resources/fonts/SourceSansPro-Bold.ttf", 12));

I tried different constructions, like:

-fx-font-family: url("../fonts/SourceSansPro-Bold.ttf");

But it doesn't work.

Upvotes: 21

Views: 52700

Answers (6)

Tega Steve
Tega Steve

Reputation: 11

You need to place the Font.ttf file in our bin/<main application> folder, that contains the .class of your application example

Upvotes: 0

FxMax
FxMax

Reputation: 11

JavaFx CSS fonts (import .ttf):

/* import fonts */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/OpenSans-Regular.ttf");
}
@font-face {
    font-family: "Open Sans Light";
    font-style: normal;
    font-weight: 300;
    src: url("/fonts/OpenSans-Light.ttf");
}
@font-face {
    font-family: "Open Sans Bold";
    font-style: normal;
    font-weight: 700;
    src: url("/fonts/OpenSans-Bold.ttf");
}
@font-face {
    font-family: "Open Sans ExtraBold";
    font-style: normal;
    font-weight: 900;
    src: url("/fonts/OpenSans-ExtraBold.ttf");
}

/* Set fonts */

.settings-name{
    -fx-font-size: 33px;
    -fx-font-family: "Open Sans Light";
    -fx-font-weight: 300;
    -fx-text-fill: #09f;
}

.settings-username{
    -fx-font-size: 19px;
    -fx-font-family: "Open Sans ExtraBold";
    -fx-font-weight: 900;
    -fx-text-fill: #09f;
}

Upvotes: 1

RichardK
RichardK

Reputation: 3471

Another way is to load font using FileIUnputStream, thus you don't need to use css:

 @FXML
    private Label myLabel;

@Override
    public void initialize(URL arg0, ResourceBundle arg1){

Font myFont = null;

        try {
            myFont = Font.loadFont(new FileInputStream(new File("patch_to_font.ttf")), 10);
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }

        myLabel.setFont(myFont);

}

Upvotes: 1

rli
rli

Reputation: 1885

Just found out one more detail: In JavaFX-8 if you want to have regular and bold variants of the same font you can specify them with two instances of @font-face. Then you can use -fx-font-weight: bold;

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

@font-face {
    font-family: 'Droid Sans Bold';
    src: url('DroidSans-Bold.ttf');
}

.root {
    -fx-font-family: 'Droid Sans'; 
}

.table-row-cell:focused .text {
    -fx-font-weight: bold;
}

Upvotes: 5

jewelsea
jewelsea

Reputation: 159556

I use a combination of application code and CSS to style via an external font.

I place the loadFont call inside an overridden Application init method to make sure it is invoked before anything much happened in the application.

Font.loadFont(CustomFontTest.class.getResource("TRON.TTF").toExternalForm(), 10);

To use the font, I reference the font by font family in CSS:

.menu-bar {
    -fx-background-color: transparent;
    -fx-font-family: TRON;
    -fx-font-size: 40px;
}

.context-menu {
    -fx-font-family: TRON;
    -fx-background-color: transparent;
    -fx-font-size: 12px;
}

Nice that the CSS sizes the fonts fine. Even when the font is loaded at size 10, the font was resized correctly to what is specified in the CSS -fx-font-size specifications.

Inline styling of a label via CSS using a Font loaded during application initialization also works fine:

Label testControl = new Label("TRON");
testControl.setStyle("-fx-font-family: TRON; -fx-font-size: 120;");

The TRON font was downloaded from dafont and placed in the same directory as the CustomFontTest class and copied to the build output directory by the build system.

Answer copied from my answer to a forum post on "Using Custom Fonts".

Upvotes: 23

Andrea Turri
Andrea Turri

Reputation: 6500

You were close to the solution:

-fx-font-family: 'Helvetica', Arial, sans-serif;

Try this, it should work fine.

Maybe this could help? (I'm not an expert in JavaFX)

https://forums.oracle.com/forums/thread.jspa?messageID=10107625

EDIT:

Load your font:

@font-face {
    font-family: Delicious;
    src: url('Delicious-Roman.otf');
}

Use your font with -fx-:

-fx-font-family: 'Delicious';

Upvotes: 19

Related Questions