-fx-font-weight - Eden Coding Resources

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 ]

Please note the errors in rendering fonts using the numerical font weights; see “Known Errors“

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-font-weight: 700;
-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

Text application for -fx-font-weight JavaFX CSS property

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>

JavaFX CSS Property

-fx-font-weight

Required Parameters:

Warning

1. Numerical Font Weights

How to work around this bug:

Relative Font Weights

3. Rendering of Font Weight 100

Parameter definition

1. Numerical Font Weight

Available font weights:

‘Fallback’ fonts

2. Named Font Weight

>> Absolute Weights

>> Relative Weights

>> Lighter:

>> Bolder:

Syntax

Values

Example

CSS:

FXML:

See Also

See Also

Ed Eden-Rump

Press ESC to close

JavaFX CSS Property -fx-font-weight

Required Parameters:

Warning

1. Numerical Font Weights

How to work around this bug:

Relative Font Weights

3. Rendering of Font Weight 100

Parameter definition

1. Numerical Font Weight

Available font weights:

‘Fallback’ fonts

2. Named Font Weight

>> Absolute Weights

>> Relative Weights

>> Lighter:

>> Bolder:

Syntax

Values

Example

CSS:

FXML:

See Also

See Also

Share Article:

Ed Eden-Rump

-fx-background-color

-fx-font-style

JavaFX CSS Property

-fx-font-weight