Brave Search

stackoverflow.com › questions › 66091490 › pdf-lib-how-to-add-custom-font

From the specs https://www.npmjs.com/package/pdf-lib#embed-font-and-measure-text

pdf-lib relies on a sister module to support embedding custom fonts: @pdf-lib/fontkit. You must add the @pdf-lib/fontkit module to your project and register it using pdfDoc.registerFontkit(...) before embedding custom fonts.

We have to npm i --save @pdf-lib/fontkit and we have to have source from where which we will read the font. In my case I have added .otf file in project and loaded font. Files are structured like on the image:

import path from 'path';
import fs from 'fs';
import {PDFDocument, PDFForm, StandardFonts, PDFFont} from 'pdf-lib';
import fontkit from '@pdf-lib/fontkit';

const pdfBytes = fs.readFileSync(path.join(__dirname, `/w_template/` + fileName + '.pdf'));
const pdfDoc = await PDFDocument.load(pdfBytes);

pdfDoc.registerFontkit(fontkit);
//load font and embed it to pdf document
const fontBytes = fs.readFileSync(path.join(__dirname, 'HouschkaHead-BoldItalic.otf'));
const customFont = await pdfDoc.embedFont(fontBytes);

const form = pdfDoc.getForm();
const textField = form.getTextField('signature');
textField.setFontSize(11);
textField.setText('stefan z');
textField.updateAppearances(customFont);

// form flatten is available from v1.16.0 and it makes form read-only (not editable)
form.flatten();
const modifiedPdf = await pdfDoc.save();

And this is the final result: check how the signature input form field is different from rest of input fields which are filled with default font Bonus: if you want to play with color of the text of inputs in form, this is what I have found while digging more under the library source code (it might be not optimal, but it can give you starting point for more things):

import {setFillingRgbColor} from 'pdf-lib'

const textField = form.getTextField(fieldName);
const da = textField.acroField.getDefaultAppearance() ?? '';
const newDa = da + '\n' + setFillingRgbColor(1, 0, 0).toString(); 
textField.acroField.setDefaultAppearance(newDa);

Answer from Stefan on Stack Overflow

Stack Overflow

stackoverflow.com › questions › 66091490 › pdf-lib-how-to-add-custom-font

node.js - pdf-lib: how to add custom font - Stack Overflow

Top answer

1 of 3

From the specs https://www.npmjs.com/package/pdf-lib#embed-font-and-measure-text

pdf-lib relies on a sister module to support embedding custom fonts: @pdf-lib/fontkit. You must add the @pdf-lib/fontkit module to your project and register it using pdfDoc.registerFontkit(...) before embedding custom fonts.

import path from 'path';
import fs from 'fs';
import {PDFDocument, PDFForm, StandardFonts, PDFFont} from 'pdf-lib';
import fontkit from '@pdf-lib/fontkit';

const pdfBytes = fs.readFileSync(path.join(__dirname, `/w_template/` + fileName + '.pdf'));
const pdfDoc = await PDFDocument.load(pdfBytes);

pdfDoc.registerFontkit(fontkit);
//load font and embed it to pdf document
const fontBytes = fs.readFileSync(path.join(__dirname, 'HouschkaHead-BoldItalic.otf'));
const customFont = await pdfDoc.embedFont(fontBytes);

const form = pdfDoc.getForm();
const textField = form.getTextField('signature');
textField.setFontSize(11);
textField.setText('stefan z');
textField.updateAppearances(customFont);

// form flatten is available from v1.16.0 and it makes form read-only (not editable)
form.flatten();
const modifiedPdf = await pdfDoc.save();

import {setFillingRgbColor} from 'pdf-lib'

const textField = form.getTextField(fieldName);
const da = textField.acroField.getDefaultAppearance() ?? '';
const newDa = da + '\n' + setFillingRgbColor(1, 0, 0).toString(); 
textField.acroField.setDefaultAppearance(newDa);

2 of 3

If anyone is struggling to change the fontSize in filling text fields using the latest inbuilt function called setFontSize(). You can use this approach.

const { PDFDocument, setFontAndSize } = require('pdf-lib');

   const pdfDoc = await PDFDocument.load(file);
   const form = pdfDoc.getForm();

const textField = form.getTextField('106Mobile.1');
    textField.setText('This works fine');
    const da = textField.acroField.getDefaultAppearance() ?? '';
    const newDa = da + '\n' + setFontAndSize('Courier', 8).toString(); //setFontAndSize() method came to resuce
    textField.acroField.setDefaultAppearance(newDa);

I had to use this because I got an error saying

No /DA (default appearance) entry found for field: 106Title.1

when setting font sizes to some text fields (not all of it). But I degenerately had those text fields. Fixed it using the above workaround.

npm

npmjs.com › package › @btielen › pdf-lib-fontkit

@btielen/pdf-lib-fontkit - npm

An font engine for pdf-lib. Latest version: 1.0.0, last published: 4 years ago. Start using @btielen/pdf-lib-fontkit in your project by running `npm i @btielen/pdf-lib-fontkit`. There are 1 other projects in the npm registry using @btielen/pdf-lib-fontkit.

      » npm install @btielen/pdf-lib-fontkit

Published Feb 04, 2022

Version 1.0.0

Author Andrew Dillon

Repository https://github.com/btielen/fontkit

Homepage https://github.com/btielen/fontkit

npm

npmjs.com › package › @pdf-lib › fontkit

pdf-lib/fontkit

An advanced font engine for Node and the browser. Latest version: 1.1.1, last published: 5 years ago. Start using @pdf-lib/fontkit in your project by running `npm i @pdf-lib/fontkit`. There are 131 other projects in the npm registry using ...

      » npm install @pdf-lib/fontkit

Published Nov 28, 2020

Version 1.1.1

Author Andrew Dillon

Repository https://github.com/Hopding/fontkit

Homepage https://github.com/Hopding/fontkit

GitHub

github.com › Hopding › pdf-lib › discussions › 1480

Loading font using fontkit · Hopding/pdf-lib · Discussion #1480

import { PDFDocument } from 'pdf-lib'; import fontKit from '@pdf-lib/fontkit'; import Noto from 'url:./NotoSansJP-Regular.ttf'; async function main() { const test = await fetch(Noto).then((res) => res.arrayBuffer()); const pdfDoc = await PDFDocument.create(); pdfDoc.registerFontkit(fontKit); const customFont = await pdfDoc.embedFont(test); } main();

Author Hopding

GitHub

github.com › Hopding › pdf-lib

GitHub - Hopding/pdf-lib: Create and modify PDF documents in any JavaScript environment

pdf-lib relies upon a sister module to support embedding custom fonts: @pdf-lib/fontkit. You must add the @pdf-lib/fontkit module to your project and register it using pdfDoc.registerFontkit(...) before embedding custom fonts (see the font embedding ...

Starred by 8.1K users

Forked by 827 users

PDF-LIB

pdf-lib.js.org

PDF-LIB · Create and modify PDF documents in any JavaScript environment.

import { PDFDocument, rgb } from 'pdf-lib' import fontkit from '@pdf-lib/fontkit' async function embedFontAndMeasureText() { const url = 'https://pdf-lib.js.org/assets/ubuntu/Ubuntu-R.ttf' const fontBytes = await fetch(url).then(res => res.arrayBuffer()) const pdfDoc = await PDFDocument.create() pdfDoc.registerFontkit(fontkit) const customFont = await pdfDoc.embedFont(fontBytes) const page = pdfDoc.addPage() const text = 'This is text in an embedded font!' const textSize = 35 const textWidth = customFont.widthOfTextAtSize(text, textSize) const textHeight = customFont.heightAtSize(textSize) page.drawText(text, { x: 40, y: 450, size: textSize, font: customFont, color: rgb(0, 0.53, 0.71), }) page.drawRectangle({ x: 40, y: 450, width: textWidth, height: textHeight, borderColor: rgb(1, 0, 0), borderWidth: 1.5, }) const pdfBytes = await pdfDoc.save() }

CodeSandbox

codesandbox.io › examples › package › @pdf-lib › fontkit

pdf-lib/fontkit examples

Use this online @pdf-lib/fontkit playground to view and fork @pdf-lib/fontkit example apps and templates on CodeSandbox.

UNPKG

app.unpkg.com › @pdf-lib › [email protected] › files › dist

pdf-lib/fontkit

An advanced font engine for Node and the browser · github.com/Hopding/fontkit

UNPKG

app.unpkg.com › @pdf-lib › [email protected] › files › README.md

UNPKG

* Font subsetting support - create a new font including only the specified glyphs ## Example ```js import fontkit from '@pdf-lib/fontkit'; import fs from 'fs'; // open a font synchronously const fontData = fs.readFileSync('font.ttf'); const font = fontkit.create(fontData); // layout a string, using default shaping features.

Find elsewhere

Google Bing Mojeek

GitHub

github.com › Hopding › pdf-lib › blob › master › src › types › fontkit.ts

pdf-lib/src/types/fontkit.ts at master · Hopding/pdf-lib

Create and modify PDF documents in any JavaScript environment - pdf-lib/src/types/fontkit.ts at master · Hopding/pdf-lib

Author Hopding

Wix Studio

forum.wixstudio.com › ask the community

pdf-lib with fontkit won't allow custom fonts - Ask the community - Community Support Forum | Wix Studio

May 23, 2022 - I’m not even calling it directly, it’s being called as part of the embed process. Here’s an example of the relevant code: import { PDFDocument , StandardFonts , TextAlignment } from ‘pdf-lib’ ; var fontkit = require ( ‘@pdf-lib/fontkit’ ); expo...

GitHub

github.com › ExodusMovement › pdf-lib-fontkit

GitHub - ExodusMovement/pdf-lib-fontkit: An advanced font engine for Node and the browser

An advanced font engine for Node and the browser. Contribute to ExodusMovement/pdf-lib-fontkit development by creating an account on GitHub.

Author ExodusMovement

GitHub

github.com › Hopding › pdf-lib › issues › 195

Cannot import `fontkit` from @pdf-lib/fontkit · Issue #195 · Hopding/pdf-lib

September 22, 2019 - I am building an Angular project and trying to import fontkit as described in the README instruction. import fontkit from '@pdf-lib/fontkit' gives an error that says Module '"/node_modules/@pdf-lib/fontkit/fontkit"' has no default export...

Published Sep 22, 2019

UNPKG

unpkg.com › browse › @pdf-lib › [email protected] › README.md

pdf-lib/fontkit/README.md

Stack Overflow

stackoverflow.com › questions › 78101155 › how-to-add-custom-font-into-pdf-lib

pdf lib.js - How to add custom font into pdf-lib - Stack Overflow

Top answer

1 of 1

Most PDF libraries will use a TTF font for PDF mapping "ToUnicode". but there are security restrictions on imbedding binary fonts from external sources into a text based carrier like a PDF wrapper.

PDF-LIB uses a fontkit which needs to do the necessary embedding of pulling a remote untainted binary.ttf into a clients text based HTML editor. So follow the guides for adding more than the font-less 14 Standard Fonts embedded in PDF Viewers / Reader-editors.

Beware as shown above some fonts may not work well without some fettling so for example this Ballet font thinks its Ball et

<html><head><meta charset="utf-8" />
  <script src="https://unpkg.com/[email protected]"></script>
  <script src="https://unpkg.com/@pdf-lib/[email protected]"></script>
  <script src="https://unpkg.com/[email protected]"></script>
    <style>
      body {width: 100vw;height: 100vh;display: flex;justify-content: center;lign-items: center;flex-direction: column;}
      p {font-family: helvetica;font-size: 24px;text-align: center;margin: 25px;}
      .small {font-family: helvetica;font-size: 18px;text-align: center;margin: 25px;}
      button {background-color: #008CBA;border: none;color: white;padding: 15px 32px;text-align: center;font-size: 16px;}
    </style>
</head>
<body>
      <p>Click the button to embed a custom font and measure text drawn in that font with <code>pdf-lib</code></p>
      <button onclick="embedFontAndMeasureText()">Create PDF</button>
      <p class="small">(Your browser will download the resulting file)</p>
</body>

  <script>
    const { PDFDocument, rgb } = PDFLib

    async function embedFontAndMeasureText() {
      const url = 'https://fonts.cdnfonts.com/s/107471/Ballet[opsz].ttf' // Fetch custom font from FULL UNTAINTED URL
      const fontBytes = await fetch(url).then(res => res.arrayBuffer())
      const pdfDoc = await PDFDocument.create() // Create a new PDFDocument
      pdfDoc.registerFontkit(fontkit)  // Register the `fontkit` instance
      const Font15 = await pdfDoc.embedFont(fontBytes)  // Embed custom font in the doc in addition to 14 standard ones

      const page = pdfDoc.addPage()  // Add a blank page to the document

      const text = 'This  is  text  in  remote  embedded  Ballet  font!'  // Create a string of plain text 
      const textSize = 30
      const textWidth = Font15.widthOfTextAtSize(text, textSize) // measure text at size at its custom width and height
      const textHeight = Font15.heightAtSize(textSize)

      // Draw the string of text using Font_15 on the page
      page.drawText(text, {
        x: 40,
        y: 450,
        size: textSize,
        font: Font15,
        color: rgb(0.25, 0.50, 0.75),
      })

      // Draw a box around the string of text
      page.drawRectangle({
        x: 40,
        y: 450,
        width: textWidth,
        height: textHeight,
        borderColor: rgb(1, 0, 0),
        borderWidth: 1.5,
      })

      // Serialize the PDFDocument to bytes (a Uint8Array)
      const pdfBytes = await pdfDoc.save()

            // Trigger the browser to download the PDF document
      download(pdfBytes, "pdf-lib_creation_example.pdf", "application/pdf");
    }
  </script>
</html>

npm

npmjs.com › package › pdf-lib

pdf-lib - npm

pdf-lib relies on a sister module to support embedding custom fonts: @pdf-lib/fontkit.

      » npm install pdf-lib

Published Nov 06, 2021

Version 1.17.1

Author Andrew Dillon

Repository https://github.com/Hopding/pdf-lib

Homepage https://pdf-lib.js.org/

UNPKG

unpkg.com › browse › @pdf-lib › [email protected] › fontkit.d.ts

pdf-lib/fontkit

The CDN for @pdf-lib/fontkit

Stack Exchange

salesforce.stackexchange.com › questions › 393881 › problem-with-adding-custome-font-and-pdf-lib

lightning web components - problem with adding custome font and pdf-lib - Salesforce Stack Exchange

Examples taken from https://pdf-lib.js.org/ I can't figure out the source of the error and how to fix it · import { loadScript } from "lightning/platformResourceLoader"; import pdflib from "@salesforce/resourceUrl/pdflib"; import fontkit from "@salesforce/resourceUrl/fontkit"; renderedCallback() { loadScript(this, pdflib).then(() => {}); loadScript(this, fontkit).then(() => {}); }

Openbase

openbase.com › js › @pdf-lib › fontkit › documentation

@pdf-lib/fontkit: Documentation | Openbase

// NPM module import fontkit from '@pdf-lib/fontkit'; // UMD module var fontkit = window.fontkit;

jsDelivr

jsdelivr.com › package › npm › @pdf-lib › fontkit

pdf-lib/fontkit - A CDN for npm and GitHub

November 28, 2020 - A free, fast, and reliable CDN for @pdf-lib/fontkit. An advanced font engine for Node and the browser

Published Dec 19, 2018

Repository https://github.com/Hopding/fontkit