Menu
The Problem
I'm creating a Super Mario themed css style sheet for my application, and I want to change the font of my buttons to a custom font called Press Start 2P, which is the pixelated font used in the NES Mario games. However, my application's not loading the font for some odd reason.
CSS code:
.text
{
-fx-font-family: "Press-Start-2P";
}
.button
{
-fx-background-color: transparent;
//-fx-text-fill: rgb(255, 255, 255);
}
@font-face
{
font-family: Press-Start-2P;
src: url("PressStart2P.ttf");
}
When I run the application, it gives me this message:
Apr 25, 2015 8:22:32 AM com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged INFO: Could not load @font-face font [file:/C:/Users/Ahmad%20El-Baher/Documents/Programming/Java/Integrative%20Project%20Semester%204/trunk/build/classes/res/styles/PressStart2P.ttf]
How do I make my application load my font properly?
687
Fortunately JavaFX supports CSS and therefore we can extract the font specification from the Java code and add it to CSS. I won’t discuss how IDs and style classes in CSS work in this post (If you not familiar with CSS you should have a look in my book ). The font of a node can be defined by using the -fx-font-* attributes in CSS.
If you want to define a global font for all controls in your application you can simply set the font to the.textstyle class. The Text shape in JavaFX contains this pseudo class by default and all nodes that render a text on the screen use the Text shape internally. Here is the css rule that will set the font for a complete application:
In this section, you will be loading the font files from your existing styles.css file. Make sure the contents of your <head> element are set up like the following code block: Save your edits to index.html, then open styles.css in your text editor. You can use the @font-face rule to load a custom font on a web page.
To set a font you need to create the font object using one of these methods and set the created front to the text using the setText () method. In addition to these you can also load your own fonts using the loadFont () method.This method has two variants where
See if your CSS file and the TTF file are in same directory. According to your code, src: url("PressStart2P.ttf"); they should be in same directory.
Also, try replacing
@font-face
{
font-family: Press-Start-2P;
src: url("PressStart2P.ttf");
}
with
@font-face
{
-fx-font-family: 'Press-Start-2P';
src: url('PressStart2P.ttf');
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
