top

Using Fonts

Published 2014-10-28 | (Compatible with SDK 2.5,3.5,4.5,5.0,5.1 and 2011,2012,2013,2014 models)

Using Fonts

Fonts are a basic visual element of every application, and a developer may wish to use different types of fonts. Typically, a default set of fonts is provided with a software application and the user may be restricted to using only these. Samsung Smart TV SDK allows users to add new fonts to the application.

You can also use Flash features to add device fonts to applications.

New fonts can easily be added by using the Samsung Smart TV SDK as follows:

  1. Add the font file to (Your Installation Directory)/Apps/MyApps Folder, which is usually the root folder of the application. This is the directory in which the file index.html is present.

    Figure 1. New Font files added to the Application Folder.

  2. Create a new file named fontlist.info. This file must be created in the same directory as index.html, that is, the root directory of the application. A sample of the file is shown below:

    Figure 2. Fontlist.info file.

    The fontlist.info file should be similar to the sample above.

    Note

    The first font in the fontlist.info file is not set to default.

  3. The default font specified in fontlist.info is used for the text in each component. In order to use a different font, the font family must be specified for each component in the CSS file. This is shown in the example below.

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    #SceneScene1 {
        position: absolute;
        left: 0;
        top: 0;
        width: 960px;
        height: 540px;
        background-color: #ffffff;
    }
    
    #SceneScene1 #svecLabel_50Z0 {
        position: absolute;
        font-family: fontstyle1;
        font-size: 20pt;
        color: #000000;
        left: 240px;
        top: 30px;
        width: 275px;
    }
    
    #SceneScene1 #svecLabel_YQ4I {
        position: absolute;
        font-family: arial;
        font-size: 20pt;
        color: #000000;
        left: 80px;
        top: 130px;
        width: 130px;
    }
    
    /* Even though the font-family is "Arial" here, it is overridden by the default font type
     * during the runtime of the application, if it is specified in fontlist.info. If the default
     * font is not specified in fontlist.info, "Arial" is set as the default font. If you do not
     * want this to happen or if you want to set individual font types for each component,
     * you have to manually set the font-family for each component.
     */
    
    #SceneScene1 #svecLabel_HBST {
        position: absolute;
        font-family: fontstyle2;
        font-size: 20pt;
        color: #000000;
        left: 80px;
        top: 240px;
        width: 130px;
    }
    
  4. If the default font is not specified in the fontlist.info file, “Arial” is used as the default font for all the components in the example above. However, a different font can also be specified for each component in the CSS file.

    Note

    The applied font can be best viewed and tested on the TV screen, rather than on the Emulator screen.