# How to Handle Deprecated `<font>` Tags in html-to-pdfmake

> Learn how html-to-pdfmake handles deprecated font tags by mapping color and converting size attributes to PDFMake point sizes. Mage your PDFs accurately.

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

---

**`html-to-pdfmake` automatically converts deprecated `<font>` tags to PDFMake styles by mapping the `color` attribute directly and translating `size` attributes (1-7) to point sizes via a configurable array.**

The `aymkdn/html-to-pdfmake` library maintains backward compatibility with legacy HTML content that uses the obsolete `<font>` element. While modern HTML5 standards deprecate this tag, the parser seamlessly translates its attributes into equivalent PDFMake style properties during document generation.

## How html-to-pdfmake Processes Deprecated `<font>` Tags

The conversion engine inspects `<font>` elements during the DOM traversal and extracts specific presentation attributes.

### Mapping the `color` Attribute

When the parser encounters a `color` attribute on a `<font>` tag, it extracts the value in the `parseStyle` function (located at line 781 in [`index.js`](https://github.com/aymkdn/html-to-pdfmake/blob/main/index.js)). The value passes through `parseColor` and stores directly as the PDFMake `color` property.

### Converting `size` Attributes to Point Sizes

The `size` attribute handling occurs in the same `parseStyle` block (lines 781-792). The parser:

1. Extracts the numeric size value
2. **Clamps** it to the valid range of 1-7 (matching legacy browser behavior)
3. Looks up the corresponding point size in the **`fontSizes`** array (defined at lines 55-56)
4. Assigns the result to the `fontSize` property

```javascript
// index.js – size handling (excerpt)
if (size !== null) {
  // clamp size between 1 and 7
  size = Math.min(Math.max(1, parseInt(size)), 7);
  // map to a point size using the fontSizes array
  ret.push({key:'fontSize',
            value:Math.max(this.fontSizes[0], this.fontSizes[size - 1])});
}

```

The default **`fontSizes`** array maps size 1 to 10 pt and size 7 to 28 pt: `[10, 14, 16, 18, 20, 24, 28]`.

## Customizing `<font>` Tag Conversion Behavior

You can override the default handling through the options object passed to the converter.

### Overriding Default Font Sizes

Pass a custom `fontSizes` array to change how numeric size values translate to points:

```js
const customSizes = [8, 10, 12, 14, 16, 18, 20]; // 1 → 8 pt, …, 7 → 20 pt

const pdfDef = htmlToPdfMake(html, { window, fontSizes: customSizes });

```

Now `size="4"` produces `fontSize: 14` instead of the default 18 pt.

### Disabling `<font>` Tag Support Entirely

To ignore legacy `<font>` elements and prevent them from generating styles, provide a `customTag` handler that returns `null` for these elements:

```js
const pdfDef = htmlToPdfMake(html, {
  window,
  customTag({ element }) {
    if (element.nodeName.toUpperCase() === 'FONT') {
      // Skip the element completely
      return null;
    }
    // otherwise fall back to default handling
    return this.parseElement(element, []);
  }
});

```

Alternatively, strip `<font>` tags from the HTML string before passing it to the converter.

## Practical Code Examples

### Basic Conversion of a `<font>` Tag

```js
const htmlToPdfMake = require('html-to-pdfmake');
const { JSDOM } = require('jsdom');
const { window } = new JSDOM('').window;

// Simple HTML containing a <font> tag
const html = `
  <p>Normal text </p>
  <font color="#ff0033" size="4">Deprecated font element</font>
`;

const pdfDef = htmlToPdfMake(html, { window });
console.log(JSON.stringify(pdfDef, null, 2));

```

**Result (relevant fragment):**

```json
{
  "text": [
    { "text": "Normal text " },
    {
      "text": "Deprecated font element",
      "color": "#ff0033",
      "fontSize": 18
    }
  ]
}

```

*Source references* – parsing of `color`/`size` in `parseStyle` at lines 781-792 and default size map at lines 55-56 in [`index.js`](https://github.com/aymkdn/html-to-pdfmake/blob/main/index.js).

## Key Source Files and Implementation Details

| File | Role | Link |
|------|------|------|
| [`index.js`](https://github.com/aymkdn/html-to-pdfmake/blob/main/index.js) | Core conversion engine – parses HTML, handles `<font>` attributes, defines default `fontSizes` | [src/index.js](https://github.com/aymkdn/html-to-pdfmake/blob/master/index.js) |
| [`test/unit.js`](https://github.com/aymkdn/html-to-pdfmake/blob/main/test/unit.js) | Unit tests that verify `<font>` color and size handling (`<font color="#ff0033" size="4">`) | [test/unit.js](https://github.com/aymkdn/html-to-pdfmake/blob/master/test/unit.js) |
| [`example.js`](https://github.com/aymkdn/html-to-pdfmake/blob/main/example.js) | Demonstrates library usage, including a `<font>` tag in the sample HTML | [example.js](https://github.com/aymkdn/html-to-pdfmake/blob/master/example.js) |

These files demonstrate how the library supports the deprecated `<font>` element, how you can customize its behavior, and how to test or demo it in your own projects.

## Summary

- **`html-to-pdfmake`** preserves legacy `<font>` tags by converting their attributes to PDFMake styles.
- The **`color`** attribute maps directly to the PDFMake `color` property via `parseColor`.
- The **`size`** attribute clamps to the range 1-7 and maps to point sizes using the configurable **`fontSizes`** array (default: 10 pt to 28 pt).
- Override default sizes by passing a custom `fontSizes` array in the options object.
- Disable `<font>` handling entirely by providing a `customTag` handler that returns `null` for these elements.

## Frequently Asked Questions

### Does html-to-pdfmake support all `<font>` attributes?

No. The library only processes the **`color`** and **`size`** attributes. Other deprecated attributes such as `face` (font family) are ignored during conversion. If you need to customize font families, use inline CSS styles or PDFMake style definitions instead.

### What is the default font size mapping for `<font size="n">`?

By default, the library uses the array `[10, 14, 16, 18, 20, 24, 28]`, where index 0 corresponds to `size="1"` (10 pt) and index 6 corresponds to `size="7"` (28 pt). The parser clamps input values outside the 1-7 range to the nearest valid boundary before indexing.

### Can I completely ignore deprecated `<font>` tags during conversion?

Yes. Provide a `customTag` function in the options object that detects `<font>` elements and returns `null`. This prevents the parser from generating any PDFMake nodes for those elements. Alternatively, preprocess your HTML to strip `<font>` tags before passing the string to the converter.

### Where is the `<font>` tag parsing logic located in the source code?

The attribute extraction occurs in the `parseStyle` function within [`index.js`](https://github.com/aymkdn/html-to-pdfmake/blob/main/index.js) at lines 781-792. The default size mapping array is defined at lines 55-56 in the same file. Unit tests validating this behavior reside in [`test/unit.js`](https://github.com/aymkdn/html-to-pdfmake/blob/main/test/unit.js), which includes test cases for both color and size attributes.