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.
To upload a custom font and apply it to your composite portal:
- Upload the font file to your PRPC application:
- 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.
- Browse for the custom font file, click
, and save the rule, as shown in the following figures:
- Create a cascading style sheet (CSS) file, for example, TestCss.css.
- 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:
src: url(' webwb/custom_font_name-bold-webfont.eot');
/* then define the style class using the font*/
font-family: " custom_font_name-Bold";
- 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="/css/TestCss.css">
- 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>
- Define your label in the HTML fragment:
- Clear your browser cache and open your portal to test your custom font:
Published July 23, 2014 — Updated August 23, 2016