Skip to content

Commit 2c0f427

Browse files
github-actions[bot]KB BotIvetNikolovaDimitarNikolovv06
authored
Added new kb article telerik-report-server-font-face-usage (#1733)
* Added new kb article telerik-report-server-font-face-usage * Update telerik-report-server-font-face-usage.md * Update telerik-report-server-font-face-usage.md --------- Co-authored-by: KB Bot <[email protected]> Co-authored-by: IvetNikolova <[email protected]> Co-authored-by: Dimitar Nikolov <[email protected]>
1 parent 3b340f1 commit 2c0f427

File tree

1 file changed

+64
-0
lines changed

1 file changed

+64
-0
lines changed

‎knowledge-base/telerik-report-server-font-face-usage.md

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
title: Fixing Missing Fonts in HTML Rendering
3+
description: "Learn how to use @font-face rule to resolve missing fonts when rendering reports on a web page."
4+
type: how-to
5+
page_title: Resolving Font Rendering Issues in Web Report Viewers
6+
meta_title: Resolving Font Rendering Issues in Web Report Viewers
7+
slug: telerik-report-server-font-face-usage
8+
tags: report-server, report-viewer, font-face, proxima-nova, css
9+
res_type: kb
10+
ticketid: 1688723
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td> Product </td>
18+
<td> Progress® Telerik® Reporting </td>
19+
</tr>
20+
<tr>
21+
<td> Report Viewer </td>
22+
<td> Web Report Viewers </td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
## Description
28+
29+
To ensure that reports stored in the [Telerik Report Server](https://www.telerik.com/report-server) and displayed in a web report viewer, such as the [HTML5 Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/overview%}), consistently use a font, even when the font is not installed on client machines. The issue occurs when the Report Viewer defaults to a generic sans-serif font for users who do not have the custom font installed locally. Exporting the report to PDF correctly embeds the intended font because the font is available on the server.
30+
31+
This knowledge base article also answers the following questions:
32+
33+
* How can I apply a custom font in the Web Report Viewers?
34+
* Why does the Report Viewer fallback to a sans-serif font?
35+
* How to use @font-face to load custom fonts in Telerik Report Server?
36+
37+
## Solution
38+
39+
To resolve the issue, use the [@font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) CSS rule to load the custom font on the web page:
40+
41+
````html
42+
<head>
43+
<style>
44+
@font-face {
45+
font-family: "Bitstream Vera Serif Bold";
46+
src: url("https://mdn.github.io/shared-assets/fonts/VeraSeBd.ttf");
47+
}
48+
#reportViewer1 {
49+
font-family: "Bitstream Vera Serif Bold", serif;
50+
}
51+
</style>
52+
</head>
53+
````
54+
55+
56+
### Additional Tips
57+
58+
* Use the browser's [Developer Tools](https://developer.chrome.com/docs/devtools) to verify the font family applied to the text elements in the Report Viewer.
59+
* Check the **Network** tab in Developer Tools to ensure the font file loads correctly.
60+
* If the font does not load, ensure the file path or URL is accessible from the client machine.
61+
62+
## See Also
63+
64+
* [CSS @font-face Rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face)

0 commit comments

Comments
 (0)