Skip to content

Added new kb article telerik-report-server-font-face-usage #1733

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 17, 2025
Merged

Added new kb article telerik-report-server-font-face-usage #1733

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dc79faa
Added new kb article telerik-report-server-font-face-usage
Jul 9, 2025
b8d93f2
Update telerik-report-server-font-face-usage.md
IvetNikolova Jul 9, 2025
c9de08f
Update telerik-report-server-font-face-usage.md
DimitarNikolovv06 Jul 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 64 additions & 0 deletions knowledge-base/telerik-report-server-font-face-usage.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
---
title: Fixing Missing Fonts in HTML Rendering
description: "Learn how to use @font-face rule to resolve missing fonts when rendering reports on a web page."
type: how-to
page_title: Resolving Font Rendering Issues in Web Report Viewers
meta_title: Resolving Font Rendering Issues in Web Report Viewers
slug: telerik-report-server-font-face-usage
tags: report-server, report-viewer, font-face, proxima-nova, css
res_type: kb
ticketid: 1688723
---

## Environment
<table>
<tbody>
<tr>
<td> Product </td>
<td> Progress® Telerik® Reporting </td>
</tr>
<tr>
<td> Report Viewer </td>
<td> Web Report Viewers </td>
</tr>
</tbody>
</table>

## Description

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.

This knowledge base article also answers the following questions:

* How can I apply a custom font in the Web Report Viewers?
* Why does the Report Viewer fallback to a sans-serif font?
* How to use @font-face to load custom fonts in Telerik Report Server?

## Solution

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:

````html
<head>
<style>
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://mdn.github.io/shared-assets/fonts/VeraSeBd.ttf");
}
#reportViewer1 {
font-family: "Bitstream Vera Serif Bold", serif;
}
</style>
</head>
````


### Additional Tips

* 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.
* Check the **Network** tab in Developer Tools to ensure the font file loads correctly.
* If the font does not load, ensure the file path or URL is accessible from the client machine.

## See Also

* [CSS @font-face Rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face)