[FIXED] ImageView and custom fonts do not load into the application properly

Issue

I've got an ImageView in SceneBuilder in my FXML file, I've loaded in the file and it shows up in in SceneBuilder but it does not work in my application. My file structure is as follows: mainFolder/src/froggerClasses/ and mainFolder/resources/ where resources is where the images are, and my FXML files are in mainFolder/resources/fxml/

My FXML file for them is:

<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="800.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="froggerClasses.ScorePageController">
   <children>
      <ImageView fitHeight="800.0" fitWidth="600.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@../highScoresMenu.png" />
         </image>
      </ImageView>
      <TextArea fx:id="scoreTextArea" editable="false" layoutX="228.0" layoutY="253.0" prefHeight="411.0" prefWidth="122.0" stylesheets="@../css/buttonStyles.css" />
      <Button fx:id="mainMenuButton" layoutX="221.0" layoutY="680.0" mnemonicParsing="false" onAction="#goBackToMainMenu" prefHeight="66.0" prefWidth="136.0" stylesheets="@../css/buttonStyles.css" text="Main Menu" />
   </children>
</Pane>

I managed to fix this before by using the absolute path, but I don't want the absolute path as it's kinda hardcoding it.

I've also got a font in the folder mainFolder/resources/fonts which I try to use within my CSS for a button but it does not set. I've tried doing this in my CSS:

@font-face
{
    src: url("PressStart2P.ttf"),
}

.button
{
-fx-font-family: "Press Start 2P";
}

As well as this within one of my classes which extends Application but it still does not work.

@Override
    public void start(Stage primaryStage) throws IOException 
    {
        Font.loadFont(getClass().getResourceAsStream("fonts/PressStart2P.ttf"), 16);
        Parent root = FXMLLoader.load(getClass().getResource("/fxml/startMenu.fxml"));
        primaryStage.setScene(new Scene(root));
        primaryStage.setTitle("Frogger: The Game");
        primaryStage.show();
    }

I've looked at similiar threads on here about both issues and got ideas from both of them and tried to apply them into here, but it still does not work and I have no idea why. What could be the issue?

Appreciate any help, thanks.

Solution

For loading custom fonts (without installing them) this worked for me:

javafx.scene.text.Font.loadFont(getClass().getResource("/fonts/My-Custom-Font.ttf").toExternalForm(), 16f);  

I suggest you load the fonts in Main class, so they become available in app start-up, fonts folder is located in resources (default path).
Than you can use fonts from fxml, or in css, like any other font:

-fx-font-family: "My Custom Font";

For setting images to ImageView, you can just set an id to the ImageView, and set the image using css, like this:

#logo {
    -fx-image: url("../images/logo.png");
}

where images folder is located in resources. Since (my) fxml files are located in resources/fxml, I have to go back one directory ( ../ ) than choose the folder where my images are located ( images ) than choose my image file ( logo.png ).

I suggest you read some articles/documentations working with folders/files.

Answered By - Amarildo