CSS cannot seem to locate custom font
<p>Below is my CSS code and my file system:
My font file is in my /res/ folder, and that resides in my project folder.</p>

<p><code>ProjectFolder/res/ExocetHeavy.tff</code>.</p>

<p>I looked at an online guide on how to put custom fonts in JavaFX with CSS and this is what I have:</p>

<pre><code>@font-face 
{
    font-family: gg;
    src: url("ExocetHeavy.ttf");
}
.label
{
    -fx-font-size: 14pt;
    -fx-font-family: gg;
    -fx-opacity: 1.0;
}
</code></pre>

<p>Note, if I try to surround <code>gg</code> with <code>' '</code> or <code>" "</code> in the <code>@font-face</code>, it claims that it is a <code>Invalid font family name</code>. Also one small annoyance is that every line of my CSS file in Eclipse is displayed as a warning in yellow (as seen below) which displays: <code>Unknown property: &lt;line here&gt;</code>, with <code>&lt;line here&gt;</code> being the content to the right of the <code>:</code>. If anyone knows how to fix that, let me know.</p>

<p>Anyways, does anyone know what I am doing wrong? My Labels are being affected correctly by <code>.label</code> as the font size changed, but the font does not.</p>

<p><a href="https://i.stack.imgur.com/Kd155.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kd155.png" alt="File System"></a></p>