Mobile native Wearable native

Fonts: Setting Application Text Fonts

Tizen provides various methods for setting fonts of the application text. Basically, all UI components have a default font, which can be changed according to the system settings.

The font handling methods include:

  • Setting the font for a UI component using the Elementary Fonts API (in mobile and wearable applications)
  • Setting the font using EDC
  • Changing the font and text size using the Edje Class: Text API (in mobile and wearable applications)

    In the application, you can set a system-wide font and font size to text(textblock) parts with text classes (except tizen). When the system applies a new system-wide font and font size to the application, the font size of text(textblock) parts with the tizen text class are not affected.

    The following words in the text_class definition are reserved for the system:

    • button
    • label
    • entry
    • title_bar
    • list_item
    • grid_item
    • toolbar_item
    • menu_item
    • tizen

    Set a specific ratio to a given font size for each object through the text class. If you give a negative value as font size, it is used as the percentage of the originally given font size. The following example code show set the font size as 150% of the given font size.

    elm_config_font_overlay_set("my_class", "TizenSans:style=Bold", -150);
elm_config_font_overlay_apply();
  • Creating your own font resources

    You can create your own font resources in the SDK to be distributed as a downloadable font package in the Tizen Store.

Applying System Font Settings

Tizen provides a special "Tizen" font name. The "Tizen" font name does not match with any specific font; it is just an alias for a system-defined font (system font). When you create a text(textblock) part with the "Tizen" font name in the application's EDC, the system font is loaded into the user application when those objects are created. Additionally, you can apply the system font to a text or textblock part by using the text class, as described above.

The following EDC example shows how to apply the system font to a TEXT or TEXTBLOCK part by using the "Tizen" font name and the tizen text class. As font name is "Tizen" and the font size is set to 36, the system font is loaded in size 36. If the system setting changes, this part loads the new system font. However, its font size is not changed, because the text class is tizen.

description 
{
   text 
   {
      font: "Tizen:style=Regular";
      font_size: 36;
      text_class: "tizen";
   }
}

If the part has a predefined text classes other than tizen, its font size is resized as well.

description 
{
   text 
   {
      font: "Tizen:style=Regular";
      font_size: 36;
      text_class: "label";
   }
}

Supported Font Styles

The font styles supported by the EFL are listed in the following table.

Table: Supported font styles
Font feature Style attribute
font_style normal
oblique
italic
font_width normal
ultracondensed
extracondensed
condensed
semicondensed
semiexpanded
expanded
extraexpanded
ultraexpanded
font_weight normal
thin
ultralight
light
book
medium
semibold
bold
ultrabold
black
extrablack

The style attributes are not case-sensitive (however, the font feature names are).

If you set the weight or width attribute to style=, it is processed to the right attribute.

font=TizenSans:style=Bold // Textblock
"TizenSans:style=Bold"; // Text font
<font=TizenSans:style=Bold> // Markup tag

You can also use each attribute separately:

font=TizenSans font_style=Regular font_weight=Bold // Textblock
<font=TizenSans font_style=Regular font_weight=Bold> // Markup tag

Setting the Font for a UI Component

You can use the Elementary Fonts API (in mobile and wearable applications) to set the font for an application.

To set a font for a UI component:

  • Set the font for a common UI component:
    Note
    You can set the font for a textblock in the code, but not in EDC (Edje Data Collection). If you add markup tags for the font inside the text, you can change the font of the text. However, you cannot set the font for a text part in this way because the TEXT type does not support markup tags. 
    char *buf = "<font=Sans:style=Regular font_size=50>Hello</font/>Font";
elm_object_part_text_set(layout, "textblock1", buf);
  • Set the font for an entry component (in mobile and wearable applications) using the elm_entry_text_style_user_push() function. It overrides the default style of the entry component for each attribute.
    Note
    The elm_entry_text_style_user_push() function only affects the main text of the UI component. To change the font of the guide text, you have to add markup tags. 
    char *user_style = "DEFAULT='font=Sans:style=Regular font_size=40'";
elm_entry_text_style_user_push(entry, user_style);
elm_object_part_text_set(entry, "elm.guide",
   "<font=Sans:style=Regular font_size=40>Guide Text</font>");

Setting the Font Using EDC

To create a layout with text using the EDC, you can set the font for each text part or textblock:

  • Set the font of a text part using the font family name and a specific style of the font family: 
    part 
{ 
   name: "text";
   type: TEXT;
   scale: 1;
   description 
   { 
      state: "default" 0.0;
      rel1.relative: 0.0 0.5;
      rel2.relative: 0.5 1.0;
      color: 0 136 170 255;
      color2: 0 136 170 50;
      color3: 0 136 170 25;
      text 
      {
         size: 25;
         font: "Sans:style=Bold";
         text: "Enventor";
         align: 0.5 0.5;
      }
   }
}
  • Add style information, which can be used for multiple textblock parts: 
    styles 
{
   style 
   { 
      name: "textblock_style1";
      base: "font=Sans:style=Regular font_size=30";
   }
}

part 
{ 
   name: "textblock";
   type: TEXTBLOCK;
   scale: 1;
   description 
   { 
      state: "default" 0.0;
      align: 0.5 0.5;
      fixed: 0 0;
      min: 0 0;
      visible: 1;
      text.text: "TEXTBLOCK";
      text.style: "textblock_style1";
      rel1.relative: 0.16 0.18;
      rel2.relative: 0.88 0.38;
   }
}

Using the Edje Text Class

You can use the Edje Class: Text API (in mobile and wearable applications) to change multiple text occurrences as a batch. If you set a new font or font size to a text class, the change is applied to multiple objects.

Note
Note that the text_class cannot be used in a UI component with markup text or the elm_entry_text_style_user_push() function. You must set the text_class in EDC.

To set the text class, you can use reserved words for text class, but you can also make your own text class:

  • Set a class for a text part: 
    part 
{ 
   name: "text";
   type: TEXT;
   scale: 1;
   description 
   { 
      state: "default" 0.0;
      rel1.relative: 0.0 0.5;
      rel2.relative: 0.5 1.0;
      color: 0 136 170 255;
      color2: 0 136 170 50;
      color3: 0 136 170 25;
      text 
      {
         size: 25;
         font: "Sans:style=Bold";
         text: "Enventor";
         align: 0.5 0.5;
         text_class: "my_class";
      }
   }
}
  • Set a class for a textblock: 
    styles 
{
   style 
   { 
      name: "textblock_style1";
      base: "font=Sans:style=Regular font_size=30 ... text_class=my_class";
   }
}

part 
{ 
   name: "textblock";
   type: TEXTBLOCK;
   scale: 1;
   description 
   { 
      state: "default" 0.0;
      align: 0.5 0.5;
      fixed: 0 0;
      min: 0 0;
      visible: 1;
      text.text: "TEXTBLOCK";
      text.style: "textblock_style1";
      rel1.relative: 0.16 0.18;
      rel2.relative: 0.88 0.38;
   }
}

  • You can handle font and font style per text_class. If you set your own text_class in the EDC, you can change the font and font size:

    elm_config_font_overlay_set("my_class", "TizenSans:style=Bold", 30);
elm_config_font_overlay_apply();

  • Set a specific ratio to a given font size for each object through the text class. If you give a negative value as font size, it is used as the percentage of the originally given font size. The following example code show set the font size as 150% of the given font size.

    elm_config_font_overlay_set("my_class", "TizenSans:style=Bold", -150);
elm_config_font_overlay_apply();
Go to top