Configuring Siebel Open UI > Customizing Styles, Applets, Fields, and Controls > Customizing Logos, Themes, Backgrounds, Tabs, Styles, and Fonts >

Adding Fonts to Siebel Open UI

This topic describes how to add custom fonts to Siebel Open UI. Although you can add custom fonts, it is recommended that your Siebel Open UI deployment use only Web-safe fonts because you might not be able to control font usage. For example, assume you deploy a custom font to all users in your company, and that you also add this font to Siebel Open UI. Assume that one of your Siebel Open UI users chooses this font in a text editor in Siebel Open UI, and then sends this text in an email message to an external customer who has not installed this custom font on their computer. In this situation, your Siebel Open UI user can read the font but the external customer cannot read it.

Using Web-safe fonts helps to make sure that any Browser or other client, such as a desktop computer or mobile device, can correctly render the text that your users provide, regardless of how each user configures font usage in their individual Browsers or clients, or the level of font customization that exists in your deployment environment. For more information about Web-safe fonts, see the topic that describes Web Safe Font Combinations at http://www.w3schools.com/cssref/css_websafe_fonts.asp.

To add fonts to Siebel Open UI

1. Create a JavaScript file that adds your custom font:
   1. Create a new JavaScript file named ckeditorfontadditions.js, and then save this file in the custom folder.

      For more information about this folder, see Organizing Files That You Customize.

   2. Add the following code to the file that you created in Step a. This code adds the fonts that Siebel Open UI displays in the Font picklists when the user edits text in the client:

   if (typeof(SiebelAppFacade.CKEDITOREXTN) == "undefined") {
     Namespace('SiebelAppFacade.CKEDITOREXTN');
     (function() {
       SiebelApp.EventManager.addListner("postload", ckeditorextn, this);
       var updatedFont = "";
       function ckeditorextn() {
         try {
           if (CKEDITOR &&
             CKEDITOR.config.font_names !== updatedFont) {
             CKEDITOR.config.font_names = CKEDITOR.config.font_names +
               'font_families'
             updatedFont = CKEDITOR.config.font_names;
           }
         } catch (error) {
           // Nothing to do.
         }
       }
     }());
   }

   where:

   • CKEDITOR.config.font_names is a predefined function that Siebel Open UI uses to store the list of fonts that it uses.
   • font_families specifies one or more font families that Siebel Open UI uses to render the font.
   • catch (error) catches any error that might occur when Siebel Open UI attempts to render the fonts that you specify. If an error occurs, then Siebel Open UI uses a predefined font to display the control.

     For this example, use the following code for font_families:

   ';Calibri/Calibri, Verdana, Geneva, sans-serif;'

   For more information about how to specify the font family, see Specifying Font Families.

2. Administer the manifest:

   For more information about how to do this step, see Configuring Manifests.

   1. Log in to the client as an administrator.
   2. Navigate to the Administration - Application screen, and then the Manifest Files view.
   3. In the Files list, add the file that you created in Step 2.

      You add the following record:

   siebel/custom/ckeditorfontadditions.js

   4. Navigate to the Administration - Application screen, and then the Manifest Administration view.
   5. In the UI Objects list, add a new record. Use values from the following table.

      Type	Usage Type	Name
      Application	Common	PLATFORM INDEPENDENT

   6. In the Object Expression list, add the following subexpression.

      Field	Value
      Group Name	Leave empty.
      Expression	Desktop
      Level	1
      Operator	Leave empty.
      Web Template Name	Leave empty.

   7. In the Files list, add the file that you created in Step 2.

      You add the following record:

   siebel/custom/ckeditorfontadditions.js

   8. Refresh the manifest. Log out of the client, and then log back in to the client.
3. Verify that Siebel Open UI added your custom fonts:
   1. Navigate to the Administration Communications screen, and then the All Templates view.
   2. In the Compose Template section, in the Text window, click the Font drop-down, and then make sure the Font list displays the font that you specified in Step b.

Specifying Font Families

You can use the following code to specify the font family:

function ckeditorextn() {
  try {
    if (CKEDITOR &&
      CKEDITOR.config.font_names !== updatedFont) {
      CKEDITOR.config.font_names = CKEDITOR.config.font_names +
        'font_families'
      updatedFont = CKEDITOR.config.font_names;
    }
  } catch (error) {
    // Nothing to do.

where:

• font_families specifies one or more font families that Siebel Open UI uses to render the font.

font_families can include one or more families. You must precede each font family with a semi-colon (;). For example:

;font_family_1;font_family_2;font_family_n

You must use the following format for each font family:

font_name/font_label, substitute_font_1, substitute_font_2, substitute_font_n, generic_font_family

where:

• font_name specifies the name of the font, such as Calibri.
• font_label specifies the text label. It displays this label in the Font picklists in the client.
• substitute_font_1 specifies the font if the font that font_name specifies does not exist in the client computer.
• substitute_font_2 specifies the font if the font that substitute_font_1 specifies does not exist in the client computer.
• generic_font_family specifies the font family if the font that substitute_font_n specifies does not exist in the client computer. Siebel Open UI chooses a font from this generic font family.

It is recommended that you specify a substitution font that resembles the font that it substitutes. For example, Calibri is a sans-serif, proportionally spaced font. If you specify Calibri as the font_name, then it is recommended that you specify a close approximation to Calibri for substitute_font_1, such as Verdana, which is also a sans-serif, proportionally spaced font. It is recommended that you use this same approach when you specify the remaining substitution fonts. For example, specify Geneva for substitute_font_2.

Consider the following example:

';Calibri/My Font, Verdana, Geneva, sans-serif;'

This code configures Siebel Open UI to do the following:

• Adds Calibri to the list of fonts that Siebel Open UI displays in Font picklists.
• Uses My Font as the label for the Calibri font that Siebel Open UI displays in Font picklists.
• If Calibri is not installed on the client computer, then Siebel Open UI uses the following sequence to determine the font that it displays:
  1. Uses Verdana for My Font.
  2. If Verdana is not installed on the client computer, then it uses Geneva for My Font.
  3. If Geneva is not installed on the client computer, then it uses any sans-serif font that is installed on the client computer for My Font.

If you specify a font that includes a space character, then you must use double-quotes to enclose the entire font name. For example, you must use double quotes to enclose Times New Roman and Courier New:

';"Times New Roman"/My Font,Georgia,"Courier New",Serif;'

For more information about font families, see the topic that describes the CSS font family property at the W3 Schools website at http://www.w3schools.com/cssref/pr_font_font-family.asp.