Version: 2023.11

Custom Fonts in HTML to PDF

Screen: Indicates that CSS rules are intended for on-screen viewing. Styles are optimized for digital screens, which typically include considerations like colors and layouts that look good on computer monitors.
Print: Instructs the browser to apply styles tailored for printed documents. This means the CSS rules are optimized for printing, ensuring readability and proper formatting when the HTML content is printed on physical media, like paper.

import {PdfDocument, WaitForType} from "@ironsoftware/ironpdf";

(async () => {
    // Define the HTML content with a custom font from Google Fonts
    const htmlWithFont = `
        <h1>Google Font</h1>
        <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
        <p style="font-family: 'Lobster', serif; font-size:30px;">Hello Google Fonts</p>
    `;

    // Configure render options
    const options = {
        // Delay render to finish font loading
        waitFor: {
            type: WaitForType.RenderDelay,
            maxWaitTime: 500,
        },
    };

    // Render HTML content with the custom font to a PDF
    const doc = await PdfDocument.fromHtml(htmlWithFont, { renderOptions: options });

    // Save the PDF
    await doc.saveAs("font.pdf");
})();

Custom Fonts in HTML to PDF

To ensure the proper rendering of assets that require time to load, it is essential to specify a render delay using the waitFor class. This includes assets such as JavaScript, fonts, and network resources.

To render HTML content with a custom font from Google Fonts, configure the rendering options to use the waitFor property. Set the wait for type as RenderDelay and specify a maximum wait time of 500 milliseconds.

After rendering the HTML, export the PDF document. You can check the resulting PDF to see the custom font perfectly loaded and displayed.