Customize the font family

The out-of-box font in Service Request Catalog 9.61 is Metric in Latin language and German versions, and Arial font in other language versions. In the case of Asian language versions that do not support these two fonts, the operating system's default font is used instead.

However, you may want to change your current font style to Service Request Catalog 1.40. The following configuration files enable you to make the change:

• style(oob).css

  The out-of-box .css file is only for your reference.

• style(modified).css

  Demonstrates the steps that are required to change the Metric font style to Service Request Catalog 1.40.

• The font folder

  Includes all the necessary font files.

• style(modified).swf

  A .swf file which is converted from the style(modified).css file

There are two circumstances in which you change the current font style to Service Request Catalog 1.40. Therefore, before you make the change, you must decide which of the following circumstances applies to you:

• If your style.css and style.swf are out-of-box files, you only need to rename style(modified).swf as style.swf, and then copy it to replace your old style.swf under the following path:

  <SRC_Root_Folder>\src\secure\configuration\default

• If your style.css and style.swf are not out-of-box files, you need to integrate the style(modified).css file into the style.css file. For more information, refer to Integrate style(modified).css into style.css.

Integrate style(modified).css into style.css

The style(modified).css file demonstrates all the necessary steps to customize the font style in Service Request Catalog 1.40. Since you have modified your style.css before, you should integrate the style(modified).css file to your style.css file to keep all your previous modifications. To do this, follow these steps:

1. Open the following file in a text editor.

   <SRC_Root_Folder>\src\secure\configuration\default\style.css

2. Insert the following lines at the start of the file.

   @namespace s "library://ns.adobe.com/flex/spark";
   @namespace componentsCommon   "com.hp.service.catalog.client.components.common.*";
   @namespace lookup "com.hp.siberia.component.formInput.lookup.*";
   @namespace renderer "com.hp.siberia.skin.component.renderer.formInput.graphic.*";
   
   @font-face {
   fontFamily: "Collator";
   src: url("font/Collator.otf");
   embedAsCFF: true;
   }
   @font-face {
   fontFamily: "Gotham";
   src: url("font/Gotham-Book.otf");
   embedAsCFF: true;
   }
   @font-face {
   fontFamily: "Gotham";
   src: url("font/Gotham-BookItalic.otf");
   fontStyle: italic;
   embedAsCFF: true;
   }
   @font-face {
   fontFamily: "Gotham";
   src: url("font/Gotham-Medium.otf");
   fontWeight: bold;
   embedAsCFF: true;
   }
   @font-face {fontFamily: "Gotham";
   src: url("font/Gotham-MediumItalic.otf");
   fontWeight: bold;
   fontStyle: italic;
   embedAsCFF: true;
   }
   

3. Optional. If you no longer need the Metric font style, remove all the @font-face entries that contain Metric.

   Note This step is not demonstrated in the style(modified).css file.

4. Change the font-family of existing selectors to Collator or Gotham to align with the original style of Service Manager 1.40.
5. Insert the following lines at the end of the file.

   s|ButtonBase.small, s|ButtonBase.basic, 
   s|ButtonBase.gelBlue, s|ButtonBase.gelGreen, s|ButtonBase.gelOrange,
   s|ButtonBase.actionButton, s|ButtonBase.widgetButton,s|ButtonBase.unsubscribeBtn {
   font-family: "Gotham";
   }
   s|TextInput,
   s|TextInput.graphic, lookup|Lookup #input,
   s|TextArea.graphic, 
   s|NumericStepper.graphic, 
   s|DropDownList.graphic, 
   s|ToggleButtonBase.graphic,
   s|NumericStepper.graphic,
   s|CheckBox.graphic,
   s|RadioButton.graphic, 
   renderer|GraphicBackgroundItemRenderer,
   componentsCommon|TimeSpinner.graphic,
   s|CheckBox.optional {
   font-family: "Gotham";
   }
   
   .attachmentLink, .attachmentLinkHover,
   .attachmentButtonTextGrey, .attachmentButtonTextWhite,
   .pageRangesPaginatorButton, .pageRangesPaginatorSkin, .pageRangesPaginatorPageRangeContainer, .pageRangeNormal {
   font-family: "Gotham";
   }
   
   s|TextBase.h1, s|RichEditableText.h1, s|ButtonBase.h1 {
   font-family: "Collator";
   }
   s|TextBase.h2, s|RichEditableText.h2, s|ButtonBase.h2 {
   font-family: "Collator";
   }
   s|TextBase.h3, s|RichEditableText.h3, s|ButtonBase.h3 {
   font-family: "Gotham";
   }
   s|TextBase.h4, s|RichEditableText.h4, s|ButtonBase.h4 {
   font-family: "Gotham";
   }
   s|TextBase.h5, s|RichEditableText.h5, s|ButtonBase.h5 {
   font-family: "Gotham";
   }
   s|TextBase.h6, s|RichEditableText.h6, s|ButtonBase.h6 {
   font-family: "Gotham";
   }
   s|TextBase.h7, s|RichEditableText.h7, s|ButtonBase.h7 {
   font-family: "Gotham";
   }
   s|TextBase.h8, s|RichEditableText.h8, s|ButtonBase.h8 {
   font-family: "Gotham";
   }
   s|TextBase.h9, s|RichEditableText.h9, s|ButtonBase.h9 {
   font-family: "Gotham";
   }
   s|TextBase.h10, s|RichEditableText.h10, s|ButtonBase.h10 {
   font-family: "Gotham";
   }
   s|TextBase.h11, s|RichEditableText.h11, s|ButtonBase.h11 {
   font-family: "Gotham";
   }
   s|TextBase.h12, s|RichEditableText.h12, s|ButtonBase.h12 {
   font-family: "Gotham";
   }
   s|TextBase.p1, s|RichEditableText.p1, s|ButtonBase.p1 {
   font-family: "Gotham";
   }
   s|TextBase.p2, s|RichEditableText.p2, s|ButtonBase.p2 {
   font-family: "Gotham";
   }
   s|TextBase.p3, s|RichEditableText.p3, s|ButtonBase.p3 {
   font-family: "Gotham";
   }
   s|TextBase.p4, s|RichEditableText.p4, s|ButtonBase.p4 {
   font-family: "Gotham";
   }
   s|TextBase.p5, s|RichEditableText.p5, s|ButtonBase.p5 {
   font-family: "Gotham";
   }
   s|TextBase.p6, s|RichEditableText.p6, s|ButtonBase.p6 {
   font-family: "Gotham";
   }
   s|TextBase.p7, s|RichEditableText.p7, s|ButtonBase.p7 {
   font-family: "Gotham";
   }
   s|TextBase.p8, s|RichEditableText.p8, s|ButtonBase.p8 {
   font-family: "Gotham";
   }
   

6. Save your modifications, and then convert your modified style.css file into a style.swf file.

   For more information, see the "Converting styles.css into styles.swf" section in Customize the text format.

7. Replace the original style.swf file with the newly converted one under the following path:

   <SRC_Root_Folder>\src \secure\configuration\default

8. Restart Service Request Catalog. You should see the modifications you made to the Service Request Cataloguser interface.

   Note If the fonts have not changed, clear your browser cache and then restart Service Request Catalog again.