# How to Configure Fonts in html-to-pdfmake: A Complete Guide

> Configure fonts in html-to-pdfmake by registering font files and referencing them in CSS. This guide simplifies custom font integration for your PDF generation.

- Repository: [Aymeric/html-to-pdfmake](https://github.com/aymkdn/html-to-pdfmake)
- Tags: how-to-guide
- Published: 2026-02-26

---

**To configure fonts in `html-to-pdfmake`, register your font files with PDFMake's `fonts` dictionary, then reference the font name in your HTML's CSS `font-family` property—the library forwards the name while PDFMake handles the actual rendering.**

`html-to-pdfmake` is a lightweight parser that converts HTML/CSS into PDFMake-compatible document definitions. While it extracts typographic styles from your markup, the library does not embed font files itself. Instead, it acts as a bridge, propagating the `font-family` values from your HTML to PDFMake's rendering engine, where the actual font resources must be registered separately.

## How Font Propagation Works

Understanding the internal flow helps debug font-related issues. The library processes fonts through four distinct stages:

### Parsing and Style Extraction

In [`index.js`](https://github.com/aymkdn/html-to-pdfmake/blob/main/index.js), the `applyStyle()` function traverses the DOM tree and extracts CSS properties for each element. When it encounters a `font-family` declaration, it normalizes the value and stores it as a PDFMake style key.

The critical logic resides around lines 856–864 of [`index.js`](https://github.com/aymkdn/html-to-pdfmake/blob/main/index.js):

```javascript
case "font-family":
  // value is trimmed and first letter capitalized
  ret.push({key: "font", value: value.charAt(0).toUpperCase() + value.slice(1)});
  break;

```

This code block trims whitespace, capitalizes the first character of the font name (e.g., "roboto" becomes "Roboto"), and creates a style entry with the key `"font"`. The resulting node resembles `{ text: "Content", font: "Roboto" }`.

### PDFMake Resolution

PDFMake receives this document definition and attempts to resolve `"Roboto"` against its `pdfMake.fonts` registry. If the font name matches a registered entry, PDFMake applies the corresponding TTF/OTF files. If no match exists, the document falls back to default fonts or fails to render, depending on your PDFMake configuration.

## Registering Custom Fonts with PDFMake

Since `html-to-pdfmake` only forwards the font name, you must supply the actual font files to PDFMake through its virtual file system (VFS) or file paths.

### Node.js Implementation

In Node.js environments, load PDFMake, initialize the VFS with your font files, and map the font names to file paths:

```javascript
const pdfMake = require('pdfmake/build/pdfmake');
const pdfFonts = require('pdfmake/build/vfs_fonts');
const htmlToPdfmake = require('html-to-pdfmake');
const { JSDOM } = require('jsdom');

// Initialize virtual file system
pdfMake.vfs = pdfFonts.vfs;

// Register custom fonts - keys must match CSS font-family values
pdfMake.fonts = {
  Roboto: {
    normal: 'fonts/Roboto-Regular.ttf',
    bold: 'fonts/Roboto-Bold.ttf',
    italics: 'fonts/Roboto-Italic.ttf',
    bolditalics: 'fonts/Roboto-BoldItalic.ttf'
  }
};

// Parse HTML with font-family: Roboto
const html = `<p style="font-family: Roboto; font-size: 14px;">Custom font text</p>`;
const { window } = new JSDOM('');
const content = htmlToPdfmake(html, { window });

// Generate PDF
const docDefinition = { content };
pdfMake.createPdf(docDefinition).write('output.pdf');

```

**Critical requirement:** Pass the `window` object from `jsdom` to `htmlToPdfmake()` when running in Node.js. The parser requires a DOM environment to resolve CSS units and styles.

### Browser Implementation

In browser environments, include the PDFMake scripts and register fonts available in your virtual file system:

```html
<script src="https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js"></script>

<script>
  // Register fonts that exist in the VFS
  pdfMake.fonts = {
    OpenSans: {
      normal: 'OpenSans-Regular.ttf',
      bold: 'OpenSans-Bold.ttf',
      italics: 'OpenSans-Italic.ttf',
      bolditalics: 'OpenSans-BoldItalic.ttf'
    }
  };

  // Convert HTML - no window option needed in browser
  const html = '<p style="font-family: OpenSans;">Browser font rendering</p>';
  const content = htmlToPdfmake(html);
  
  pdfMake.createPdf({ content }).download('document.pdf');
</script>

```

## Disabling Font Family Inheritance

If you want `html-to-pdfmake` to ignore `font-family` declarations entirely—forcing PDFMake to use its default font regardless of CSS—add the property to the `ignoreStyles` array:

```javascript
const content = htmlToPdfmake(
  '<p style="font-family: Arial;">Ignored font</p>',
  { ignoreStyles: ['font-family'] }
);

```

This prevents the library from creating font style entries, allowing PDFMake to apply its built-in default typography.

## Summary

- **`html-to-pdfmake` forwards font names**: It extracts `font-family` from CSS and passes normalized names (capitalized first letter) to PDFMake as the `font` property.
- **Font registration is external**: You must register matching font names in `pdfMake.fonts` with paths to TTF/OTF files or base64-encoded data.
- **Source code location**: The font-family parsing logic resides in [`index.js`](https://github.com/aymkdn/html-to-pdfmake/blob/main/index.js) within the `applyStyle()` function, specifically the `case "font-family":` block at lines 856–864.
- **Node.js requires jsdom**: Always provide the `window` option when parsing HTML in Node.js environments.
- **Use `ignoreStyles` to bypass**: Add `'font-family'` to the `ignoreStyles` option to prevent CSS fonts from affecting output.

## Frequently Asked Questions

### Why are my custom fonts not appearing in the generated PDF?

Your fonts are not registered correctly with PDFMake. `html-to-pdfmake` successfully forwards the font name (visible in the generated document definition), but PDFMake cannot find matching files in `pdfMake.fonts`. Ensure the font name in your CSS exactly matches the key in your `pdfMake.fonts` object, accounting for the automatic capitalization that `html-to-pdfmake` applies to the first letter.

### Can I use web fonts like Google Fonts directly?

No. `html-to-pdfmake` does not download or embed web fonts. You must download the font files (TTF or OTF format) and register them with PDFMake's virtual file system. The library only handles the CSS-to-PDFMake mapping, not font file management or network requests.

### How do I prevent specific HTML font styles from affecting my PDF?

Use the `ignoreStyles` option when calling `htmlToPdfmake()`. Pass an array containing `'font-family'` to strip all font declarations, or include other CSS properties like `'font-size'` or `'color'` to ignore those specific styles while preserving others.

### Does html-to-pdfmake support font weights like bold or italic?

Yes, but indirectly. When you register a font family with PDFMake, you must provide separate file paths for `normal`, `bold`, `italics`, and `bolditalics` variants in the `pdfMake.fonts` dictionary. If your HTML uses `<strong>` or `<em>` tags, PDFMake automatically selects the corresponding variant from your registered font family.