Recently updated my to Unity 2020.3.21f1 and had to update UIToolkit at the same time. Now all the font references in my project are broken. As an example, this is my .USS
.game-title {
-unity-font: url('/Assets/Fonts/gontserrat/Gontserrat-Light.ttf');
font-size: 192px;
color: #ccc;
}
The in the UIToolkit debugger I see this:
I am not sure which font is actually being used but it is definitely not the one I asked for. My assumption here is that how I reference fonts has changed from .14 to .18 and I am getting a default font rather than the requested one but I haven’t been able to find any documentation covering the new way of referencing fonts from a .uss file.
Any thoughts?
Ok, I did some more poking around. It looks like I have to set -unity-font-definition rather than -unity-font, like so:
.game-title {
-unity-font: url('/Assets/Fonts/gontserrat/Gontserrat-Light.ttf');
-unity-font-definition: url('/Assets/Fonts/gontserrat/Gontserrat-Light.ttf');
font-size: 192px;
color: #ccc;
}
The value of -unity-font doesn’t seem to matter. Setting -unity-font-definition is what changes the actual displayed font.
Is this by design? I don’t see any reference to -unity-font-definition in the documentation.
Ok, more testing. using -unity-font-definition doesn’t seem to be a complete answer. Its working in some places and not others. I have no idea how this is supposed to work.
So I am setting the values but they don’t seem to be applied. From the UIToolkit Debugger this is what’s coming from my style sheet:
And these are the actual set values:
Is it just broken? Again, how am I supposed to actually set a font from a style sheet? This all worked fine in preview.14. I am trying to understand how setting fonts changed between .14 and .18
Hello!
You’re right that you have to use -unity-font-definition, we’re aware our documentation is lacking and are actively working on it, sorry about that 
Now with that said, it should always work. You showed your definition using a variable, and that seems to be the problem, that it’s not translating to the right font definition for you most probably. Can you share your USS related to this?
Thanks for confirming the -unity-font-definition. That helps a lot. As for the .uss, I have a big block of variables I define under Visual Element:
VisualElement {
/* Text properties */
--engine-regular: url('/Assets/Fonts/rubik/Rubik-Regular.ttf');
--engine-bold: url('/Assets/Fonts/rubik/Rubik-Bold.ttf');
--advice-regular: url('/Assets/Fonts/Poppins/Poppins-Regular.ttf');
--advice-italic: url('/Assets/Fonts/Poppins/Poppins-Italic.ttf');
--font-size-small: 52px;
--font-size-medium: 64px;
--font-size-large: 80px;
--text-color: #eee;
--text-highlight: #ccc;
--text-active: #aaa;
--text-background: #bbb;
--text-input-placeholder: #bbc;
--text-list-placeholder: #99a;
--text-dark: #333;
--text-black: #000
}
There’s more in my file but those are the ones for text. Here’s a sample use of those variables:
.tile-discovery__discovery-label {
margin-bottom: 4px;
-unity-font-definition: var(--engine-bold);
color: var(--text-color);
font-size: var(--font-size-large);
}
I have lots of variables in my USS files and, as far as I can tell, only the -unity-font-definition variables are not working. The font color and size seem to working correctly. I’ve broken my USS into multiple files and am including them each in the root element of my .uxml file like so:
<ui:VisualElement name="page-element" style="position:absolute; top:0px; left:0px; height: 100%; width: 100%; flex-direction: column; justify-content: center; align-items: center; background-color: transparent;">
<Style src="UISkin.uss" />
<Style src="UIOverlay.uss" />
<Style src="CommonElements.uss" />
<Style src="Notifications.uss" />
<Style src="SelectionBox.uss" />
<Style src="PropertyBox.uss" />
<Style src="CommandEditor.uss" />
My entire UI is built in code so there’s not much actually in UXML except the style references. All the variables are defined in UISkin.uss with the idea that I can replace just that one file and re-skin the UI.
So the problem appears to be that the variables are not from the same uss file. Putting this block at the top of each uss file fixes the problem:
VisualElement {
/* Text properties */
--engine-regular: url('/Assets/Fonts/rubik/Rubik-Regular.ttf');
--engine-bold: url('/Assets/Fonts/rubik/Rubik-Bold.ttf');
--advice-regular: url('/Assets/Fonts/Poppins/Poppins-Regular.ttf');
--advice-italic: url('/Assets/Fonts/Poppins/Poppins-Italic.ttf');
}
So it appears that -unity-font-definition only resolves variables defined the the current file. I can live with that for a while. Hopefully its a bug and will fixed; otherwise I’ll have to come up with some other skinning strategy.
Hi, one of the issue you may have is that the variables are defined using a VisualElement selector. If you have many VisualElement selectors across many style sheets the latest one will win so that might explain why putting the block at the top of each uss fixes the problem.
However, doing so is a bad practice because variables are meant to be declared at one place only. Also more importantly declaring variables on a type selector (especially VisualElement) is to be avoided. The reasons is that all elements will have a set of variables defined which has performance implication.
Variables are meant to be inherited by children. What you should do instead is declare the variables on the container of your elements or the root of tree if they are global. One way to do this is to use the :root selector or a style class set on the container of your elements.
For more information : Unity - Manual: USS custom properties (variables)
Great. Switching to defining my variables on :root fixes the problem. Thanks.