Specifying external font in JavaFX CSS
Solution 1
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';
Solution 2
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".
Solution 3
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;
}
Solution 4
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;
}
Solution 5
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);
}
Related videos on Youtube
syscreat
Driven professional with broad technical skill set. Thrives in environments that constantly embrace new technologies. Interested in challenging and varied position that will enable me to capitalize on sound technical and project management expertise, with opportunities for personal and professional growth.
Updated on July 09, 2022Comments
-
syscreat almost 2 years
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.
-
syscreat over 11 yearsMy question about external font, because I need to use my font, instead of using already installed on user system.
-
Andrea Turri over 11 yearssame way. use
@Font-face
to load font and then in-fx-font-family
you put the name of your font. -
jewelsea over 11 yearsThough I haven't tested it, according to this JavaFX tracking issue, @font-face support isn't scheduled to be added to JavaFX until JavaFX 8/JDK 8 timeframe.
-
XXL about 11 years@AndreaTurri doesn't seem to work for me - tested in the latest v. of JavaFX Scene Builder. How did you test this?
-
void256 about 11 years@AndreaTurri it does not work in JavaFX 2.2! See the JavaFX Jira issue referenced by jewelsea for details. It was clarified that this is a JavaFX 8 feature only and there are no plans to backport to 2.2. See jewelseas other answer for a proper way to load custom fonts in JavaFX 2.2 which actually works.
-
syscreat about 8 yearsThe original question is about how to use this loaded fonr in CSS. Sure, you can load font file directly, but how you would like to use it in forms stylesheets?
-
RichardK about 8 yearsOh, my bad. I had problems with using custom font in CSS, so this was my alternative solution. Anyway you're right - it's not related to this question.
-
Keith OYS over 6 yearsI've gotten it to work with
Font.loadFont(getClass().getResourceAsStream("TRON.TTF"), 10);
instead. :) -
smac89 over 4 yearsRemember to declare your
@font-face
first in the CSS for it to work!