Managing Fonts & Resources

The following table presents some common app assets and where you should locate them within webOS TV apps. Do not count on the TV to have an Internet connection for the core functionality of your app (unless, of course, your app relies on a web-based service for functionality). Keep assets that need to be frequently loaded local to the app (packaged with the application) rather than require them to be loaded from the Internet.

Resource type

Recommended location

Do's and Don'ts


Included with the packaged app.

DO use image compression tools to reduce the size and decrease load times.


Usually included with the packaged app. For large, infrequently access audio, you can place these online.

DO pick a bit rate that produces acceptable audio quality.


Remote. Unless small or required for app functionality, video resources should be loaded as needed.

DO pre-process video to the appropriate resolution and bit rate required for use within your app.


Included with the packaged app.

DO make sure fonts are properly licensed for distribution.
DO use system fonts when appropriate.


Included with the packaged app.

DO place small amounts of text directly into your app source.
DO load larger files as needed by performing local Ajax requests.

Packaging Assets

Assets you use in your app should be packaged with your application for deployment to the TV.

  • For Enyo projects, place assets in the assets directory. Since webOS TV 4.5, we do not support Enyo framework. For more information about Enyo support, see Enyo/Enact Guides.

  • For other projects, choose a directory within your application and place assets there. You can create sub-directories to group assets as needed.

Image, Audio, and Video Assets

Image, audio and video assets are accessed relative to the location of the index.html file within your package structure, except in the case of CSS files. CSS assets are referenced relative to the location of the CSS file.

From the index.html file, refer to an image in the assets directory as follows:

<body style='background-image: url("assets/my_image.png")'>

The same path applies to JavaScript files, regardless of where they are in your project:


From a CSS file located in source/css:

.my-background {
	background-image: url("../../assets/my_image.png");

Font Assets

Font assets can be packaged with your app. Fonts are also referred to relative to the location of index.html. The following sample specifies a font resource for h2 tags:

@font-face {
	font-family: AlexBrush;
	src: url('assets/AlexBrush-regular.ttf');
h2 {
	font-family: AlexBrush;