Font Setting: Using Various Fonts in the Application

This tutorial demonstrates how you can use different methods to set and change the font style in your application. You can change the font to another system-default font or one of your own fonts.

Warm-up

Become familiar with the Edje, Elementary, and Evas API basics by learning about:

• Setting the Font for a UI Component

  Set the font of a UI component.

• Setting the Font Using EDC

  Create a layout with text using the EDC.

• Using the Edje Text Class

  Change the font of several text parts simultaneously.

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();