Fonts

 

 

webOS TV apps are not restricted to only use the system fonts, and are free of adapting any fonts. Among all the fonts, we recommend WOFF and TTF. When using fonts, make sure to take full responsibility for any license and distribution requirements.

 

By default, webOS TV platform uses the MuseoSans font family. If you are building an web app for webOS TV, it is recommended that you select the Latin script fonts, such as MuseoSans and Miso. For locales that use non-Latin scripts, text will be shown in LG Display font.

 

If you choose to use fonts other than the system fonts, they should be made to be downloaded with the app download. Fonts can be remotely linked, but this is discouraged, as it will slow the loading time.

 

Fonts which are used by the app should be placed under the assets/fonts directory in order to be packaged with the app. Also, fonts are referred to relative to the location of index.html. 

 

The following code is an example of the CSS font-face declaration which css file is included in source/style/app.css, and the font Monoton is placed under the assets/fonts directory.

@font-face {
    font-family: "Monoton";
    src: url("../../assets/fonts/Monoton-Regular.ttf");
}

 

See Managing Fonts and Resources for details,.

fonts.pngFonts in Apps

If you are building an enyo app, it is recommended that developers use the following latin script fonts. Of course, a general web app for webOS TV can use these fonts.

  • MuseoSans
  • MISO

 

If the app language is based on a non-latin script, it is recommended that developers use the LG Display font.

 

You can override the default Moonstone header's font-family to the other font. Modify the variable in the source/style/Theme.less as follows. To learn about the app styling, see Less.js.

@moon-header-font-family: "Monoton"; 

System Fonts

webOS TV system uses the Miso and MuseoSans font family.

App Tile on Home Screen

font_app_home.png

App Tile on Apps Screen

font_app2.png

App Tile on Recent Screen

font_recent_app.png

System Input                                           System Clock

font_input.png       font_clock.png

 

Navigation