This content has been archived.

Table of Contents

How to apply a custom font for labels in a composite portal

You can style your composite portal with a custom font, which is commonly used in landing page headers and footers and in other user interface labels.

Suggested approach

To upload a custom font and apply it to your composite portal:

  1. Upload the font file to your PRPC application:
    1. In the webwb directory, create a Rule-File-Binary record with a name that matches your font file, for example, <custom_font_name>-bold-webfont.eot.
    2. Browse for the custom font file, click Upload File, and save the rule, as shown in the following figures:
      Browse for custom font in webwb directory, file name webfont.
      Binary File New directory webwb file type
      Binary File webwb Upload File custom_font
  2. Create a cascading style sheet (CSS) file, for example, TestCss.css.
  3. In the CSS file, use the @font-face directive to declare your font and define the style class that uses the custom font, as shown in this sample declaration:

@font-face {

font-family: "custom_font_name-Bold";

src: url(' webwb/custom_font_name-bold-webfont.eot');

}

/* then define the style class using the font*/

.mylabel_style1{

font-family: " custom_font_name-Bold";

font-size: 14pt;

}

  1. Save the UserWorkForm HTML fragment in an open ruleset and reference the CSS that you created in Steps 2 and 3:

<link rel="stylesheet" type="text/css" href="https://community.pega.com/css/TestCss.css">

  1. Identify the section on your portal where you need to reference the label that applies the custom font. Specify a Rule-HTML-Fragment instead of a direct label:

<pega:include name="MyLabel" type='Rule-HTML-Fragment' ></pega:include>
Section Data-Portal, UserTopPanel, edit Label Rule-HTML-Fragment>

  1. Define your label in the HTML fragment:

<label class="mylabel_style1">HELLO</label>
HTML Fragment, HTML Source for JSP

  1. Clear your browser cache and open your portal to test your custom font:
    Custom font test example, Hello World
Suggest Edit

Related Content

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.