Introduction

This article will discuss how to match the report design and preview font. The issue looks something like this:

Figure 1: Font mismatch between design and preview

Steps Example

Step 1

Drag an HTML report element into the report.

Figure 2: HTML report element

Step 2

Paste the following code into the HTML report element.

You  may change the font-family accordingly.

<style type="text/css">
.canvas-body, .report_body {
  font-family: 'Courier Prime', monospace;
  font-style: italic;
}

@media print {
  * {
  font-family: 'Courier Prime', monospace;
  font-style: italic;
  }
}
</style>

Step 3

Result

Figure 3: Result showing matching font between design and preview