Fonts and Resources

The following table presents some common app assets and explains where you should locate them for your webOS TV apps. Do not count on the TV device’s Internet connectivity for core functionalities of your app, and keep frequently-accessed assets local to the app - in other words, package them with the app, rather than load them every time they are needed through the Internet.

The path to each asset should be specified relative to the index.html file.

For example, it will look like assets/my_image.png, not start with /media/developer/. The latter may work in the Developer Mode app but will not when the app is released through LG Seller Lounge.

Or you can use webOSTV.js library’s webOS.fetchAppRootPath() method. For details, see fetchAppRootPath.

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. If it is large and infrequently accessed, you can place it online.

DO pick a bit rate that produces acceptable audio quality.

Video

Remote. If it is small or required for app functionality, video resources can be included with the packaged app. Even in that case, they should be loaded when needed only.

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

Font

Included with the packaged app

DO make sure fonts are properly licensed for distribution.

Text

Included with the packaged app

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

Packaging assets

You should package the 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 the 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 for CSS assets. 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

We do not restrict the font of apps to the system fonts. You can use any fonts in your app, although our recommendations are WOFF and TTF. When using fonts, keep in mind that you take the full responsibility for any license and distribution requirements.

You can also package font assets with your app. Fonts are referred to relative to the location of the index.html file. 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