Howto embed font variants in JavaFX

Question

I need to embed local .ttf files on a JavaFX project with some variants (bold, italic and so on) but the css parser seems to not support font properties in @font-face declaration:

@font-face {
    font-family: 'Open Sans', sans-serif;
    src: url('fonts/OpenSans-Regular.ttf');
}
@font-face {
    font-family: 'Open Sans', sans-serif;
    src: url('fonts/OpenSans-Bold.ttf');
    font-weight: bold;
}
@font-face {
    font-family: 'Open Sans', sans-serif;
    src: url('fonts/OpenSans-ExtraBoldItalic.ttf');
    font-style: italic;
}

WARNING: CSS Error parsing jar:file:/home/test/dist/run736633436/test.jar!/it/test/vending/css/application.css: Unexpected TOKEN [:] at [8,15] mag 06, 2015 3:40:15 PM com.sun.javafx.css.parser.CSSParser fontFace WARNING: CSS Error parsing jar:file:/home/test/dist/run736633436/test.jar!/it/test/vending/css/application.css: Unexpected TOKEN [:] at [13,14]

How could I achieve this?

==EDIT==

Notice that the parser complains on font-weight: bold; and font-style: italic; rules.

The font-family should have the name of the font-family that you want to use in all the css file. The font-family to be used by you should have unique names like OpenSansRegular, OpenSansBold, OpenSansBoldItalic. Though I am not sure if this is exactly the issue as your CSS Error doesn't say much, but it is worth giving a try. — ItachiUchiha
– ItachiUchiha, Commented May 6, 2015 at 15:10
@ItachiUchiha Nope, defining different families won't matter: the parser still complains on font-weight: bold; and font-style: italic;. Use of multiple same-font-family with different font propertis is actually correct; see w3schools - at least speaking about css3. — Azathoth
– Azathoth, Commented May 6, 2015 at 15:22

Franz Bender · Accepted Answer · 2017-03-24 14:35:55Z

5

I think I found a solution. Try to swap the font-weight and font-style attributes with the src attribute. In your case your css would look like:

@font-face {
    font-family: 'Open Sans', sans-serif;
    src: url('fonts/OpenSans-Regular.ttf');
}
@font-face {
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    src: url('fonts/OpenSans-Bold.ttf');
}
@font-face {
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
    src: url('fonts/OpenSans-ExtraBoldItalic.ttf');
}

I had the same issue and swapping the attributes did the job. I have no idea why that is but it seems to resolve the issue.

answered Mar 24, 2017 at 14:35

Franz Bender

661 silver badge3 bronze badges

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

Collectives™ on Stack Overflow

Howto embed font variants in JavaFX

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related