🌐
npm
npmjs.com › package › @pdf-lib › fontkit
@pdf-lib/fontkit - npm
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
🌐
CodeSandbox
codesandbox.io › examples › package › @pdf-lib › fontkit
@pdf-lib/fontkit examples - CodeSandbox
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
🌐
jsDelivr
jsdelivr.com › package › npm › @pdf-lib › fontkit
@pdf-lib/fontkit CDN by jsDelivr - 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
🌐
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
🌐
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
cdn.jsdelivr.net › @pdf-lib/[email protected]
@pdf-lib/fontkit CDN by jsDelivr - A free, fast, and reliable Open Source CDN
Looking for a nice landing page for your package? https://www.jsdelivr.com/package/npm/@pdf-lib/fontkit
🌐
npm
npmjs.com › package › @btielen › pdf-lib-fontkit
@btielen/pdf-lib-fontkit - npm
February 4, 2022 - 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
🌐
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
Find elsewhere
Top answer
1 of 3
22

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);

2 of 3
7

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.

🌐
PDF-LIB
pdf-lib.js.org
PDF-LIB · Create and modify PDF documents in any ...
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() }
🌐
GitHub
github.com › Hopding › pdf-lib
Hopding/pdf-lib: Create and modify PDF documents in any ...
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
Languages   TypeScript 80.9% | HTML 9.9% | JavaScript 8.5% | Objective-C 0.3% | CSS 0.2% | Starlark 0.1% | Java 0.1%
🌐
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...
🌐
PDF-LIB
pdf-lib.js.org › docs › api › classes › pdffont
PDFFont · PDF-LIB
▸ of(ref: PDFRef, doc: PDFDocument, embedder: FontEmbedder): PDFFont‹›
🌐
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
🌐
JSFiddle
jsfiddle.net › Hopding › rgu6ca59 › 2
Embed Font and Measure Text (pdf-lib) - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
🌐
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
🌐
Socket
socket.dev › npm › package › @btielen › pdf-lib-fontkit › dependencies › 1.0.0
@btielen/pdf-lib-fontkit - npm Package Dependencies - Socket
An font engine for pdf-lib. Version: 1.0.0 was published by bennot. Start using Socket to analyze @btielen/pdf-lib-fontkit and its dependencies to sec...
🌐
GitMemory
gitmemory.com › issue › Hopding › pdf-lib › 195 › 534810458
Cannot import `fontkit` from @pdf-lib/fontkit - pdf-lib
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.