Define Font from Javascript

General
1

Not sure if bug or normal behaviour.
I can not declare a Font from Javascript.

Eg.

<App>
	<Font File="SanFrancisco.ttf" ux:Global="SF" />

	<JavaScript>
		module.exports = {
			font:"SF"
		}
	</JavaScript>

	<StackPanel>
		<Text Font="SF" Value="SF Font from UX" />
		<Text Font="{font}" Value="SF Font from JS" />
	</StackPanel>
</App>

The first text works fine but the second one does not apply my font. Why do I want to do this? I am developing a small eBook and I want the user to be able to change fonts from three different options so I want to attach the font value to an Observable and be able to change it.

If this is normal, is there a workaround for what I am trying to achieve?

2

I have the same issue as Luis. Posted on Slack but the only suggestion was to hard code it, which is pretty ugly, but in many cases would not work at all.

I also wonder if this applies to many other cases, in which you’d want to iterate through data (like with an each) so you’d need to use variables in UX attributes.

Just to add when I used a ux:Global declaration it just doesn’t work. When I use the full filename as the variable i actually get the error: “Fuse.Font must specify required attribute ‘File’”

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/Eyip2RtT69dT-image-1474320325240.23.25 PM.png)

3

Hello. Quick update. I also tried:

<App>
	<Font File="SanFrancisco.ttf" ux:Global="SF" />

	<JavaScript>
		module.exports = {
			font:"SF",
			fontName: "SanFrancisco.ttf"
		}
	</JavaScript>

	<StackPanel>
		<Text Font="SF" Value="SF Font from UX" />
		<Text Value="SF Font from JS">
			<Font File="{fontName}" />
		</Text>
	</StackPanel>
</App>

But know I am getting the following error 'Fuse.Font' must specify required attribute 'File'

4

You can use resources to make the font selectable from JavaScript.

<App>
	<Font File="../../Assets/fonts/Roboto-Bold.ttf" ux:Key="Bold"/>
	<Font File="../../Assets/fonts/Roboto-Regular.ttf" ux:Key="Regular"/>
	<Font File="../../Assets/fonts/Roboto-Italic.ttf" ux:Key="Italic"/>
	
	<JavaScript>
		exports.items = [
			{ font: "Bold" },
			{ font: "Regular" },
			{ font: "Italic" },
		]
	</JavaScript>
	<StackPanel>
		<Each Items="{items}">
			<Text Value="Sample Text" Font="{DataToResource font}"/>
		</Each>
	</StackPanel>
</App>

Note the use of ux:Key on the Font. This registers the font as a resource. These can then be used as <Text Font="{Resource Bold}"/>. {DataToResource font} takes the name of the resource from the font variable. For example, if font = Bold then {DataToResource font} is equivalent to {Resource Bold}.

1 Like