The -fx-font-weight
JavaFX CSS Property gives developers the opportunity to define how heavy or light their text appears to the user. It roughly corresponds to the font-weight web CSS property, although it does not support the entire web CSS syntax.
-fx-font-weight
can be defined using either:
- Named font weights
- Numerical font weights
Named font weights can be relative or absolute.
Required Parameters:
-fx-font-weight
only takes one parameter from a list of allowed values.
Parameter | Description | Value |
---|---|---|
<font-weight> | A font weight defined using either a numerical or a named font weight. | [ normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ] |
Warning
1. Numerical Font Weights
JavaFX has significant issues rendering font weights defined using numerical font weights. Since JavaFX 8u40, there has been a known issue where font weights other than 700 and 400 are not supported.
Note weights from 100 to 600 are rendered as “Normal”. Font weights from 700 to 900 are rendered as bold.
This also affects fonts rendered with the ‘lighter’ and ‘bolder’ relative font weight specifiers.

This has been recorded as a bug in the OpenJDK bug system as JDK-8090423. It has been there since 2014 and may not be fixed soon.
How to work around this bug:
Different font weights of “True Type” fonts are most commonly loaded into a JavaFX program in separate files, for example:
resources │ │ ├───css │ styles.css │ └───fonts Montserrat-Thin.otf Montserrat-ExtraLight.otf Montserrat-Light.otf Montserrat-Regular.otf Montserrat-Medium.otf Montserrat-SemiBold.otf Montserrat-Bold.otf Montserrat-ExtraBold.otf Montserrat-Black.otf SIL Open Font License.txt
To include these using CSS, we use the @font-face
notation in CSS:
@font-face{
font-family: 'Montserrat';
font-weight: 100;
src: url('../fonts/Montserrat-Thin.otf') format('truetype');
}
/* ... Add other fonts */
@font-face{
font-family: 'Montserrat';
font-weight: 900;
src: url('../fonts/Montserrat-Black.otf') format('truetype');
}
Then, when you define each style class or element style, define it using the -fx-font-family
syntax specific to that weight. This is the general font family, then a space, then the weight’s common name.
Weight Name | Imported as | Full Declaration | Rendered Weight |
---|---|---|---|
Thin | Montserrat-Thin.otf | -fx-font-family: ‘Montserrat Thin’ | 100 |
Extra Light | Montserrat-ExtraLight.otf | -fx-font-family: ‘Montserrat ExtraLight’ | 200 |
Light | Montserrat-Light.otf | -fx-font-family: ‘Montserrat Light’ | 300 |
Regular | Montserrat-Regular.otf | -fx-font-family: ‘Montserrat Regular’ | 400 |
Medium | Montserrat-Medium.otf | -fx-font-family: ‘Montserrat Medium’ | 500 |
Semi Bold | Montserrat-SemiBold.otf | -fx-font-family: ‘Montserrat SemiBold’ | 600 |
Bold | Montserrat-Bold.otf | -fx-font-family: ‘Montserrat Bold’ | 700 |
Extra Bold | Montserrat-ExtraBold.otf | -fx-font-family: ‘Montserrat ExtraBold’ | 800 |
Black | Montserrat-Black.otf | -fx-font-family: ‘Montserrat Black’ | 900 |
Using the above table, you can reference each of the imported styles individually:
.extraBold{
-fx-font-family: 'Montserrat ExtraBold'
}
For compound weights such as “ExtraBold” there should be no space between ‘Extra’ and ‘Bold’.
This will produce a fully-supported set of weights.

Relative Font Weights
Where the keywords lighter or bolder are used, the weight of the element should be based on a calculation that factors in the inherited weight of the element and the keyword used.
For example, in Web CSS, weights are banded such that there are three lighter and three bolder options:

JavaFX does not support this full functionality, but does offer some. See ‘Relative Weights‘ for a description of the functionality.
3. Rendering of Font Weight 100
Renderng of ‘Thin’ (weight 100) fonts is known not to render correctly at all times.
This is a known bug recorded in JDK-8087986, which was first created in 2014, and is likely to do with the Prism rendering system. It may not be fixed soon.
Parameter definition
1. Numerical Font Weight
Font weights should be defined using numbers in increments of 100, from 100 to 900.
-fx-font-weight: 700;
-fx-background-color: #81c483;
-fx-background-color: #81c483;
Font weights above 700 will be rendered as bold. Font weights below 700 will be rendered as normal. See ‘Known Errors‘ to learn more about producing apps with fully-supported weight selection.
Available font weights:
If you are importing a custom font using the @font-face
notation, or by invoking loadFont()
in Java code, you must use the fonts that are available.
In the following example, only the 400 font weight is loaded, so it is the only weight available and will be used by default.
@font-face{
font-family: 'GloriousFree';
font-style: normal;
font-weight: 400;
src: url('https://edencoding.com/wp-content/uploads/2021/02/GloriousFree-dBR6.ttf') format('truetype');
}
.app-title{
-fx-font: 36px 'Glorious Free';
}
‘Fallback’ fonts
Web CSS fonts support a ‘fall-back‘ syntax, in which a font defined using an exact weight that is not available will be substituted for a weight that is available.
This can occur when a non-exact weight is specified, for example ‘450’, which is not a multiple of 100.
JavaFX does not support CSS Fonts Level 4 syntax (e.g. variable weight fonts). Therefore, specific values of font weight should be used. For example, you cannot define a weight of 457 if you want something between 400 and 500.
If a non-exact numerical weight is supplied, the JavaFX CSS parser will throw a CSS Error:
Expected '<font-weight>' while parsing '-fx-font-weight'
2. Named Font Weight
Font weights can alternatively be defined using keywords, much like colors or font styles (e.g. italic).
In each case, the named weight is used as a substitute for a numerical weight. Weights can be defined using absolute (“bold”) or relative (“bolder”) named options.
>> Absolute Weights
Each of the absolute weights corresponds to a numerical weight, with bold
corresponding to a heavier weight than normal
.
Named weight | Numerical weight |
---|---|
normal | 400 |
bold | 700 |
>> Relative Weights
The JavaFX CSS interpreter does not support a complete font weight system. Instead:
>> Lighter:
- If the inherited weight is bold, render the text as normal.
- If the inherited weight is normal, make no change
>> Bolder:
- If the inherited weight is bold, make no change.
- If the inherited weight is normal, render the text as bold
Syntax
/* Absolute named weights */
-fx-font-weight: normal;
-fx-font-weight: bold;
/* Relative named weights */
-fx-font-weight: lighter;
-fx-font-weight: bolder;
/* Absolute numerical weights */
-fx-font-weight: 100; //normal
-fx-font-weight: 200; //normal
-fx-font-weight: 300; //normal
-fx-font-weight: 400; //normal
-fx-font-weight: 500; //normal
-fx-font-weight: 600; //normal
-fx-font-weight: 700; //bold
-fx-font-weight: 800; //bold
-fx-font-weight: 900; //bold
Values
The JavaFX CSS interpreter isn’t a fully-compliant CSS Interpreter, nor does it support all CSS-values you might expect for the related CSS property.
-fx-weight
can have the following values:
Value | Description |
---|---|
normal | The standard font weight, corresponding to a weight of 400 |
bold | A heavier font weight, corresponding to a weight of 700 |
lighter | Font weight lighter than (or the same as) the inherited weight |
bolder | Font weight heavier than (or the same as) the inherited weight |
100, 200, 300, 400, 500, 600, 700, 800, 900 | Absolute numerical font weights. Weights between 100 and 600 are rendered as normal. Weights between 700 and 900 are rendered as bold. |
Example

CSS:
@font-face{
font-family: 'Montserrat';
font-weight: 100;
src: url('https://edencoding.com/wp-content/uploads/2021/04/montserrat/Montserrat-Thin.otf') format('truetype');
}
@font-face{
font-family: 'Montserrat';
font-weight: 200;
src: url('https://edencoding.com/wp-content/uploads/2021/04/montserrat/Montserrat-ExtraLight.otf') format('truetype');
}
@font-face{
font-family: 'Montserrat';
font-weight: 300;
src: url('https://edencoding.com/wp-content/uploads/2021/04/montserrat/Montserrat-Light.otf') format('truetype');
}
@font-face{
font-family: 'Montserrat';
font-weight: 400;
src: url('https://edencoding.com/wp-content/uploads/2021/04/montserrat/Montserrat-Regular.otf') format('truetype');
}
@font-face{
font-family: 'Montserrat';
font-weight: 500;
src: url('https://edencoding.com/wp-content/uploads/2021/04/montserrat/Montserrat-Medium.otf') format('truetype');
}
@font-face{
font-family: 'Montserrat';
font-weight: 600;
src: url('https://edencoding.com/wp-content/uploads/2021/04/montserrat/Montserrat-SemiBold.otf') format('truetype');
}
@font-face{
font-family: 'Montserrat';
font-weight: 700;
src: url('https://edencoding.com/wp-content/uploads/2021/04/montserrat/Montserrat-Bold.otf') format('truetype');
}
@font-face{
font-family: 'Montserrat';
font-weight: 800;
src: url('https://edencoding.com/wp-content/uploads/2021/04/montserrat/Montserrat-ExtraBold.otf') format('truetype');
}
@font-face{
font-family: 'Montserrat';
font-weight: 900;
src: url('https://edencoding.com/wp-content/uploads/2021/04/montserrat/Montserrat-Black.otf') format('truetype');
}
.title{
-fx-background-color: #fcc200;
-fx-font-weight: 900;
-fx-padding: 10px;
}
.content{
-fx-background-color: #FEEBAA;
}
.justified{
-fx-text-alignment: justify;
}
.large{
-fx-font-size: 1.5em;
}
.emphasis{
-fx-font-style: italic;
}
.bold{
-fx-font-weight: 700;
}
.secondary{
-fx-fill: #375fcb;
}
FXML:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>
<VBox alignment="TOP_CENTER" prefHeight="250.0" prefWidth="500.0" stylesheets="@../css/weightStyles.css">
<HBox spacing="10.0">
<VBox.margin>
<Insets />
</VBox.margin>
<GridPane prefWidth="240.0">
<Label alignment="CENTER" maxWidth="300" style="-fx-background-color: #375fcb; -fx-font-weight: lighter; -fx-text-fill: white" styleClass="title" text="Defined Using Font Family" wrapText="true" GridPane.columnSpan="2" />
<Label style="-fx-background-color: #BCCAEE;" styleClass="title" text="Defined As:" wrapText="true" GridPane.rowIndex="1">
<maxWidth>300</maxWidth>
</Label>
<Label maxWidth="300" style="-fx-background-color: #BCCAEE;" styleClass="title" text="Rendered As:" wrapText="true" GridPane.columnIndex="1" GridPane.rowIndex="1" />
<VBox style="-fx-background-color: #DBE2F6" GridPane.columnSpan="2" GridPane.rowIndex="2" GridPane.rowSpan="9" />
<Label style="-fx-font-family: 'Montserrat Thin';" text="Thin" GridPane.rowIndex="2">
<padding>
<Insets left="10.0" />
</padding>
</Label>
<Label style="-fx-font-family: 'Montserrat ExtraLight';" text="Extra Light" GridPane.rowIndex="3">
<padding>
<Insets left="10.0" />
</padding>
</Label>
<Label style="-fx-font-family: 'Montserrat Light';" text="Light" GridPane.rowIndex="4">
<padding>
<Insets left="10.0" />
</padding>
</Label>
<Label style="-fx-font-family: 'Montserrat Regular';" text="Regular" GridPane.rowIndex="5">
<padding>
<Insets left="10.0" />
</padding>
</Label>
<Label style="-fx-font-family: 'Montserrat Medium';" text="Medium" GridPane.rowIndex="6">
<padding>
<Insets left="10.0" />
</padding>
</Label>
<Label style="-fx-font-family: 'Montserrat SemiBold';" text="Semi Bold" GridPane.rowIndex="7">
<padding>
<Insets left="10.0" />
</padding>
</Label>
<Label style="-fx-font-family: 'Montserrat Bold';" text="Bold" GridPane.rowIndex="8">
<padding>
<Insets left="10.0" />
</padding>
</Label>
<Label style="-fx-font-family: 'Montserrat ExtraBold';" text="Extra Bold" GridPane.rowIndex="9">
<padding>
<Insets left="10.0" />
</padding>
</Label>
<Label style="-fx-font-family: 'Montserrat Black';" text="Black" GridPane.rowIndex="10">
<padding>
<Insets left="10.0" />
</padding>
</Label>
<Label layoutX="10.0" layoutY="96.0" style="-fx-font-family: 'Montserrat Thin';" text="100" GridPane.columnIndex="1" GridPane.rowIndex="2">
<padding>
<Insets left="10.0" />
</padding>
</Label>
<Label layoutX="10.0" layoutY="133.0" style="-fx-font-family: 'Montserrat ExtraLight';" text="200" GridPane.columnIndex="1" GridPane.rowIndex="3">
<padding>
<Insets left="10.0" />
</padding>
</Label>
<Label layoutX="10.0" layoutY="171.0" style="-fx-font-family: 'Montserrat Light';" text="300" GridPane.columnIndex="1" GridPane.rowIndex="4">
<padding>
<Insets left="10.0" />
</padding>
</Label>
<Label layoutX="10.0" layoutY="208.0" style="-fx-font-family: 'Montserrat Regular';" text="400" GridPane.columnIndex="1" GridPane.rowIndex="5">
<padding>
<Insets left="10.0" />
</padding>
</Label>
<Label layoutX="10.0" layoutY="245.0" style="-fx-font-family: 'Montserrat Medium';" text="500" GridPane.columnIndex="1" GridPane.rowIndex="6">
<padding>
<Insets left="10.0" />
</padding>
</Label>
<Label layoutX="10.0" layoutY="283.0" style="-fx-font-family: 'Montserrat SemiBold';" text="600" GridPane.columnIndex="1" GridPane.rowIndex="7">
<padding>
<Insets left="10.0" />
</padding>
</Label>
<Label layoutX="10.0" layoutY="321.0" style="-fx-font-family: 'Montserrat Bold';" text="700" GridPane.columnIndex="1" GridPane.rowIndex="8">
<padding>
<Insets left="10.0" />
</padding>
</Label>
<Label layoutX="10.0" layoutY="358.0" style="-fx-font-family: 'Montserrat ExtraBold';" text="800" GridPane.columnIndex="1" GridPane.rowIndex="9">
<padding>
<Insets left="10.0" />
</padding>
</Label>
<Label layoutX="10.0" layoutY="395.0" style="-fx-font-family: 'Montserrat Black';" text="900" GridPane.columnIndex="1" GridPane.rowIndex="10">
<padding>
<Insets left="10.0" />
</padding>
</Label>
<columnConstraints>
<ColumnConstraints hgrow="ALWAYS" percentWidth="50.0" />
<ColumnConstraints percentWidth="50.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" percentHeight="10.0" prefHeight="30.0" />
<RowConstraints percentHeight="10.0" />
<RowConstraints percentHeight="10.0" />
<RowConstraints percentHeight="10.0" />
<RowConstraints percentHeight="10.0" />
<RowConstraints percentHeight="10.0" />
<RowConstraints percentHeight="10.0" />
<RowConstraints percentHeight="10.0" />
<RowConstraints percentHeight="10.0" />
<RowConstraints percentHeight="10.0" />
<RowConstraints percentHeight="10.0" />
</rowConstraints>
<HBox.margin>
<Insets />
</HBox.margin>
</GridPane>
<GridPane layoutX="10.0" layoutY="10.0" prefWidth="240.0" HBox.hgrow="ALWAYS">
<columnConstraints>
<ColumnConstraints percentWidth="50.0"/>
<ColumnConstraints percentWidth="50.0"/>
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" percentHeight="10.0" prefHeight="30.0"/>
<RowConstraints percentHeight="10.0"/>
<RowConstraints percentHeight="10.0"/>
<RowConstraints percentHeight="10.0"/>
<RowConstraints percentHeight="10.0"/>
<RowConstraints percentHeight="10.0"/>
<RowConstraints percentHeight="10.0"/>
<RowConstraints percentHeight="10.0"/>
<RowConstraints percentHeight="10.0"/>
<RowConstraints percentHeight="10.0"/>
<RowConstraints percentHeight="10.0"/>
</rowConstraints>
<Label alignment="CENTER" maxWidth="300" style="-fx-background-color: #81c483;" styleClass="title"
text="Defined Using Font Weight:" wrapText="true" GridPane.columnIndex="0" GridPane.columnSpan="2"/>
<Label maxWidth="300" style="-fx-background-color: #D5EBD6;" styleClass="title" text="Defined As:"
wrapText="true" GridPane.columnIndex="0" GridPane.rowIndex="1"/>
<Label maxWidth="300" style="-fx-background-color: #D5EBD6;" styleClass="title" text="Rendered As:"
wrapText="true" GridPane.columnIndex="1" GridPane.rowIndex="1"/>
<VBox style="-fx-background-color: #F3F9F3;" GridPane.columnSpan="2" GridPane.rowIndex="2"
GridPane.rowSpan="9"/>
<Label style="-fx-font-family: 'Montserrat';-fx-font-weight: 100" text="Regular" GridPane.columnIndex="1"
GridPane.rowIndex="2">
<padding>
<Insets left="10.0"/>
</padding>
</Label>
<Label style="-fx-font-family: 'Montserrat';-fx-font-weight: 200" text="Regular" GridPane.columnIndex="1"
GridPane.rowIndex="3">
<padding>
<Insets left="10.0"/>
</padding>
</Label>
<Label style="-fx-font-family: 'Montserrat';-fx-font-weight: 300" text="Regular" GridPane.columnIndex="1"
GridPane.rowIndex="4">
<padding>
<Insets left="10.0"/>
</padding>
</Label>
<Label style="-fx-font-family: 'Montserrat';-fx-font-weight: 400" text="Regular" GridPane.columnIndex="1"
GridPane.rowIndex="5">
<padding>
<Insets left="10.0"/>
</padding>
</Label>
<Label style="-fx-font-family: 'Montserrat';-fx-font-weight: 500" text="Regular" GridPane.columnIndex="1"
GridPane.rowIndex="6">
<padding>
<Insets left="10.0"/>
</padding>
</Label>
<Label style="-fx-font-family: 'Montserrat';-fx-font-weight: 600" text="Regular" GridPane.columnIndex="1"
GridPane.rowIndex="7">
<padding>
<Insets left="10.0"/>
</padding>
</Label>
<Label style="-fx-font-family: 'Montserrat';-fx-font-weight: 700" text="Bold" GridPane.columnIndex="1"
GridPane.rowIndex="8">
<padding>
<Insets left="10.0"/>
</padding>
</Label>
<Label style="-fx-font-family: 'Montserrat';-fx-font-weight: 800" text="Bold" GridPane.columnIndex="1"
GridPane.rowIndex="9">
<padding>
<Insets left="10.0"/>
</padding>
</Label>
<Label style="-fx-font-family: 'Montserrat';-fx-font-weight: 900" text="Bold" GridPane.columnIndex="1"
GridPane.rowIndex="10">
<padding>
<Insets left="10.0"/>
</padding>
</Label>
<Label layoutX="80.0" layoutY="96.0" style="-fx-font-family: 'Montserrat';-fx-font-weight: 100" text="100"
GridPane.rowIndex="2">
<padding>
<Insets left="10.0"/>
</padding>
</Label>
<Label layoutX="80.0" layoutY="133.0" style="-fx-font-family: 'Montserrat';-fx-font-weight: 200" text="200"
GridPane.rowIndex="3">
<padding>
<Insets left="10.0"/>
</padding>
</Label>
<Label layoutX="80.0" layoutY="171.0" style="-fx-font-family: 'Montserrat';-fx-font-weight: 300" text="300"
GridPane.rowIndex="4">
<padding>
<Insets left="10.0"/>
</padding>
</Label>
<Label layoutX="80.0" layoutY="208.0" style="-fx-font-family: 'Montserrat';-fx-font-weight: 400" text="400"
GridPane.rowIndex="5">
<padding>
<Insets left="10.0"/>
</padding>
</Label>
<Label layoutX="80.0" layoutY="245.0" style="-fx-font-family: 'Montserrat';-fx-font-weight: 500" text="500"
GridPane.rowIndex="6">
<padding>
<Insets left="10.0"/>
</padding>
</Label>
<Label layoutX="80.0" layoutY="283.0" style="-fx-font-family: 'Montserrat';-fx-font-weight: 600" text="600"
GridPane.rowIndex="7">
<padding>
<Insets left="10.0"/>
</padding>
</Label>
<Label layoutX="80.0" layoutY="321.0" style="-fx-font-family: 'Montserrat';-fx-font-weight: 700" text="700"
GridPane.rowIndex="8">
<padding>
<Insets left="10.0"/>
</padding>
</Label>
<Label layoutX="80.0" layoutY="358.0" style="-fx-font-family: 'Montserrat';-fx-font-weight: 800" text="800"
GridPane.rowIndex="9">
<padding>
<Insets left="10.0"/>
</padding>
</Label>
<Label layoutX="80.0" layoutY="395.0" style="-fx-font-family: 'Montserrat';-fx-font-weight: 900" text="900"
GridPane.rowIndex="10">
<padding>
<Insets left="10.0"/>
</padding>
</Label>
</GridPane>
</HBox>
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
</VBox>
See Also
- Provide links to related content using an unordered list
See Also
- -fx-font
- -fx-font-size
-fx-font-style