Font
Arial is a widely used font available in most operating systems and devices.
Setup
First include the Publications Office global CSS in your web content element (WCE) in order to have access to fonts and styles. There are two ways:
1. Manual
Introduce a div
tag with the class gcss-op
into your WCE as in the example below:
<div class="gcss-op">
Your page code here
</div>
2. Apply by selecting
This is the recommended and simpler method. For details, go to OP Global CSS instructions in the Liferay Knowledge Base.
Implementation
With the Publications Office global CSS applied to your WCE, all style settings will automatically work.
To apply the different style options outlined aboved, introduce the classes or CSS variables to the HTML elements.
Example
Heading 2 with default 3xl font size
Heading 2 with l font size
Sentence with default m body font size.
Sentence with 5xl font size.
Paragraph with default xl line height for body text extended reading... lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula arcu, dictum sed pharetra eu, vestibulum eu est. Aliquam pharetra laoreet nunc a dictum. Proin suscipit pellentesque tortor.
Paragraph with line height xs for buttons, navigation, etc. (under 1 line)... lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula arcu, dictum sed pharetra eu, vestibulum eu est. Aliquam pharetra laoreet nunc a dictum. Proin suscipit pellentesque tortor.
HTML code
<h2>Heading 2 with default 3xl font size</h2>
<h2 class="gs-u-font-size-l">Heading 2 with l font size</h2>
<p>Sentence with default m body font size.</p>
<p class="gs-u-font-size-5xl">Sentence with 5xl font size.</p>
<p><strong>Paragraph with default xl line height for body text extended reading...</strong> lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula arcu, dictum sed pharetra eu, vestibulum eu est. Aliquam pharetra laoreet nunc a dictum. Proin suscipit pellentesque tortor.</p>
<p style="line-height:var(--gs-base-line-height-xs)!important;"><strong>Paragraph with line height xs for buttons, navigation, etc. (under 1 line)...</strong> lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula arcu, dictum sed pharetra eu, vestibulum eu est. Aliquam pharetra laoreet nunc a dictum. Proin suscipit pellentesque tortor.</p>