# Define Font from Javascript

**URL:** <https://forums.fusetools.com/t/define-font-from-javascript/3808>\
**Category:** General\
**Created:** [September 15, 2016, 4:04pm UTC](https://forums.fusetools.com/t/define-font-from-javascript/3808 "2016-09-15T16:04:41Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [September 20, 2016, 8:41am UTC](https://forums.fusetools.com/t/define-font-from-javascript/3808/4 "2016-09-20T08:41:45Z")

</div>

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

```auto
<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}`.

---

_[View the full topic](https://forums.fusetools.com/t/define-font-from-javascript/3808)._