How to Set Fonts in PDFs
A webfont is a specialized font designed for use on websites. These fonts are hosted on web servers and downloaded by web browsers to ensure consistent and visually appealing text rendering on websites, regardless of the user's local font availability. Additionally, icon fonts, which use symbols and glyphs, are often used in web design to create scalable, customizable icons and maintain a visually consistent user interface through CSS manipulation.
CSS includes web fonts, enabling you to specify font files for download when your website is accessed. IronPDF supports font loading and rendering to PDF from HTML.
How to Set Fonts in PDFs
- Download C# library IronPDF for setting fonts in PDFs
- Utilize HTML to import or request fonts from an external source
- Delay the rendering process to ensure proper font loading
- Render the HTML to PDF as usual
- Import font file using the @font-face rule in CSS styling
Get started with IronPDF
Start using IronPDF in your project today with a free trial.
Use WebFonts and Icons Example
IronPDF supports WebFonts (such as Google Fonts and the Adobe web font API) and icon fonts, such as those used by Bootstrap and FontAwesome.
Fonts often require a delay in rendering to load properly. When a font is not loaded correctly, it can lead to a blank page without any text. You can use the WaitFor.AllFontsLoaded
method to wait for the font by assigning a maximum wait time to it. The default maximum wait time is 500ms.
Here is a small example of how to use a WebFont named Lobster in your project.
:path=/static-assets/pdf/content-code-examples/how-to/webfonts-webicons-render-webfont.cs
using IronPdf;
// HTML contains webfont
var html = @"<link href=""https://fonts.googleapis.com/css?family=Lobster"" rel=""stylesheet"">
<p style=""font-family: 'Lobster', serif; font-size:30px;"" > Hello Google Fonts</p>";
ChromePdfRenderer renderer = new ChromePdfRenderer();
// Wait for font to load
renderer.RenderingOptions.WaitFor.AllFontsLoaded(2000);
// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);
// Export the PDF
pdf.SaveAs("font-test.pdf");
Imports IronPdf
' HTML contains webfont
Private html = "<link href=""https://fonts.googleapis.com/css?family=Lobster"" rel=""stylesheet"">
<p style=""font-family: 'Lobster', serif; font-size:30px;"" > Hello Google Fonts</p>"
Private renderer As New ChromePdfRenderer()
' Wait for font to load
renderer.RenderingOptions.WaitFor.AllFontsLoaded(2000)
' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(html)
' Export the PDF
pdf.SaveAs("font-test.pdf")
Explore more WaitFor options, such as those for fonts, JavaScript, HTML elements, and network idle on the 'IronPDF WaitFor Class Documentation.'
Import Font File Example
To use an existing font file, apply the @font-face rule in CSS styling. It also works when using a combination of the @font-face rule and embedding base64-encoded woff files. In the following example, I will be using Pixelify Sans Font.
:path=/static-assets/pdf/content-code-examples/how-to/webfonts-webicons-custom-font.cs
using IronPdf;
// Import custom font
string html = @"<!DOCTYPE html>
<html>
<head>
<style>
@font-face {font-family: 'Pixelify';
src: url('fonts\PixelifySans-VariableFont_wght.ttf');
}
p {
font-family: 'Pixelify';
font-size: 70px;
}
</style>
</head>
<body>
<p>Custom font</p>
</body>
</html>";
ChromePdfRenderer renderer = new ChromePdfRenderer();
// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);
// Export the PDF
pdf.SaveAs("customFont.pdf");
Imports IronPdf
' Import custom font
Private html As String = "<!DOCTYPE html>
<html>
<head>
<style>
@font-face {font-family: 'Pixelify';
src: url('fonts\PixelifySans-VariableFont_wght.ttf');
}
p {
font-family: 'Pixelify';
font-size: 70px;
}
</style>
</head>
<body>
<p>Custom font</p>
</body>
</html>"
Private renderer As New ChromePdfRenderer()
' Render HTML to PDF
Private pdf As PdfDocument = renderer.RenderHtmlAsPdf(html)
' Export the PDF
pdf.SaveAs("customFont.pdf")
Limitations on Azure PDF
The Azure hosting platform does not support servers loading SVG fonts in their lower shared web app tiers. However, Azure's VPS and Web Role are not sandboxed in the same way and do support web font rendering.