Fonts

Fonts family

By default, the Smart TV platform provides a number of different fonts. Mostly these are based on the CEA-2014 standard, and as such a Tiresias (like) and Letter Gothic 12 pitch (like) font are included by default. To make sure you are using the proper fonts, follow the naming in the Smart TV profiles documentation. 

You SHOULD NOT rely on built-in fonts but instead use downloadable web fonts.

A Smart TV provides Sans Serif fonts containing all the characters required to properly render the text in the languages available on the device, but the exact font used may vary among device models. Right-to-lefttext  rendering is also supported if required by any language available on the device. However, the identity, look and language coverage of these fonts cannot be guaranteed across all devices.

Consider the following when using web fonts:

• Font resources MUST be in the WOFF / WOFF2  (Web Open Font Format) or TTF (TrueType Font) file format.

• Font resources SHOULD NOT be large, otherwise they can take a long time to download and also consume a lot of memory and CPU power.

• The Font Loading API  can be used to improve text rendering performance.

To automatically switch to the correct font in case the naming changes, always include a generic font-family name like in this example:

...

<p style="font-family:'Philips Screen Font 4', sans-serif">font test</p>

Here, the font "Philips Screen Font 4" is set as font-style for the paragraph, with as backup the generic font-family name "sans-serif". Generic font-family names supported are:

• "sans-serif"

• "monospace"

Font size

Font size MUST be large enough to be seen on a TV screen from 3 meters (10 feet) away: the average distance that users sit from the TV.

The minimum text size RECOMMENDED for Smart TV Applications is 3/100 of the screen height, or "3vh" in CSS (this gives approximately 32px at 1920 x 1080px):

p { font-size: 32px; }

Colors

The font color must be clearly visible relative to the background color.

Apps MUST explicitly set colors for all visual elements including text and page background colors.

The app MUST not rely on any default colors defined by the browser engine.

* { background-color: #000000; color: #ffffff; }