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:
      
      
      
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;

}

4. 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-previous.pega.com/css/TestCss.css">

5. 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>

6. Define your label in the HTML fragment:

<label class="mylabel_style1">HELLO</label>

7. Clear your browser cache and open your portal to test your custom font: