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 locally 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

Image

Included with the packaged app.

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

Audio

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

DO pick a bit rate that produces acceptable audio quality.

Video

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.

Font

Included with the packaged app.

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

Text

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

You should package your app's assets with your app for deployment to webOS TV.

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

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

Image, Audio, and Video Assets

You can access image, audio, and video assets 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:

myImage.setSrc("assets/my_image.png");

From a CSS file located in source/css:

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

Font Assets

You can also package font assets with your app. Fonts are 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;
}
Navigation