Skip to main content

This content has been archived and is no longer being updated.

Links may not function; however, this content may be relevant to outdated versions of the product.

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

Suggest edit Updated on September 25, 2019

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://docs.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
Did you find this content helpful? YesNo

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us