Pdf-lib: Cannot embed custom font from local file

Created on 2 Mar 2020  ·  3Comments  ·  Source: Hopding/pdf-lib

Hi,

I'm trying to set a custom font from a local file as it was shown in examples.

...
const url = '/opt/path/to/my/font/file/OpenSans-Bold.5a100916.ttf'
const fontBytes = fs.readFileSync(url);
const existingPDF = fs.readFileSync(outputPath);
const pdfDoc = await PDFDocument.load(existingPDF);

pdfDoc.registerFontkit(fontkit);

const customFont= await pdfDoc.embedFont(fontBytes);
const pages = pdfDoc.getPages();
...

I keep getting this error message:

Error: Input to PDFDocument.embedFont was a custom font, but no fontkit instance was found. You must register a fontkit instance with PDFDocument.registerFontkit(...) before embedding custom fonts.

I'm using:

Node: v13.3.0
"pdf-lib": "^1.4.0",
"@pdf-lib/fontkit": "0.0.4",

Question is, how to register fontkit correctly or is there something else I'm doing wrong?

Most helpful comment

Hello,

I know this is a closed issue but I wanted to give some informations because this issue was the closest to what I needed.

I'm using pdf-lib on Node.js in order to edit a pdf document.

I wanted to add my own fonts in my method and this issue guide me to my goal.

If you are working with a Node.js API and want to add custom font, this is how it's works for me.

Just one thing first, you need to set your variables and in Node.js it's

const fontKit = require ('@pdf-lib/fontkit') ✅

not

import fontKit from '@pdf-lib/fontkit ❌

I said that for people like me who start to code... 😅

Here a quick exemple :

Imagine we create a router for editing a pdf doc:

const fs = require('fs');
const {PDFDocument, degrees, rgb, StandardFonts} = require('pdf-lib');
const fontkit = require('@pdf-lib/fontkit'); // <= here is the Most Important Thing.


router.put('/pdf', async (req, res, next) => {

    //Get an existing pdf file to edit 
    const existingPdfBytes = fs.readFileSync(path/to/the/name_of_your_pdf_file.pdf');

    //Load the file
    const pdfDoc = await PDFDocument.load(existingPdfBytes);

   //Add font kit to the project
    pdfDoc.registerFontkit(fontkit);

   // Get all pages of the pdf document 
    const pages = pdfDoc.getPages();

    // Select the page to working on
    const firstPage = pages[0];

    // Here it's where you start to add your custom using file system.
    const customFont1 = fs.readFileSync(path/to/the/name_of_your_font1.otf');
    const customFont2 = fs.readFileSync(path/to/the/name_of_your_font2.otf');
    const customFont3 =  fs.readFileSync(path/to/the/name_of_your_font3.otf');

    // Add the font file content into the doc
    const cusFont1 = await pdfDoc.embedFont(customFont1);
    const cusFont2 = await pdfDoc.embedFont(customFont2);
    const cusFont3 = await pdfDoc.embedFont(customFont3);


    // Now you can draw your text on your document, just an exemple ...
    firstPage.drawText('Write something', {
        x: 217,
        y: 210,
        size: 12,
        font: cusFont1,
        color: rgb(0.95, 0.1, 0.1),
    });

    firstPage.drawText('Write another thing, {
        x: 230,
        y: 140,
        size: 20,
        font: cusFont2,
        color: rgb(0.95, 0.1, 0.1),
    });

    // Write the Date on the document...
    let todayDate = new Date();

    firstPage.drawText(todayDate.getDate() + ' ' + months[todayDate.getMonth()] + ' ' + todayDate.getFullYear(), {
        x: 62,
        y: 70,
        size: 12,
        font: cusFont3,
        color: rgb(0.95, 0.1, 0.1),
    });

   // Like in the official documentation, this is you final document
    const pdfBytes = await pdfDoc.save();

    // Save the doc where you want to. I recommend you tu use a try/catch for safety...

    try {
        fs.writeFileSync(path/to/destination/where/saving/the_name_of_your_pdf_file.pdf', pdfBytes);
        return res.json({
            "result": true,
            "response": {src: '/where/saving/the_name_of_your_pdf_file.pdf'}
        })
    } catch (e) {
        return res.json({
            "result": false,
            "response": {error: e}
        })
    }
});

Voilà,
I hope you will understand how to add custom fonts in pdf-lib with Node.js.

If you need more information about FileSystem, check this => https://nodejs.org/api/fs.html

Thanks for watching, reading, sharing, enjoying this comment, and don't forget to say thank you to @Hopding for this nice and cool project .

🙋🏾‍♂️

All 3 comments

Hello @AlanHadzic!

What does the fontkit variable in the snippet you shared refer to? I don’t see an import of it anywhere.

Note also that the instructions for registering fontkit can be found here: https://github.com/Hopding/pdf-lib/blob/master/README.md#fontkit-installation

I'm going to close this issue for now. But please feel free to reopen it if you are still having trouble.

Hello,

I know this is a closed issue but I wanted to give some informations because this issue was the closest to what I needed.

I'm using pdf-lib on Node.js in order to edit a pdf document.

I wanted to add my own fonts in my method and this issue guide me to my goal.

If you are working with a Node.js API and want to add custom font, this is how it's works for me.

Just one thing first, you need to set your variables and in Node.js it's

const fontKit = require ('@pdf-lib/fontkit') ✅

not

import fontKit from '@pdf-lib/fontkit ❌

I said that for people like me who start to code... 😅

Here a quick exemple :

Imagine we create a router for editing a pdf doc:

const fs = require('fs');
const {PDFDocument, degrees, rgb, StandardFonts} = require('pdf-lib');
const fontkit = require('@pdf-lib/fontkit'); // <= here is the Most Important Thing.


router.put('/pdf', async (req, res, next) => {

    //Get an existing pdf file to edit 
    const existingPdfBytes = fs.readFileSync(path/to/the/name_of_your_pdf_file.pdf');

    //Load the file
    const pdfDoc = await PDFDocument.load(existingPdfBytes);

   //Add font kit to the project
    pdfDoc.registerFontkit(fontkit);

   // Get all pages of the pdf document 
    const pages = pdfDoc.getPages();

    // Select the page to working on
    const firstPage = pages[0];

    // Here it's where you start to add your custom using file system.
    const customFont1 = fs.readFileSync(path/to/the/name_of_your_font1.otf');
    const customFont2 = fs.readFileSync(path/to/the/name_of_your_font2.otf');
    const customFont3 =  fs.readFileSync(path/to/the/name_of_your_font3.otf');

    // Add the font file content into the doc
    const cusFont1 = await pdfDoc.embedFont(customFont1);
    const cusFont2 = await pdfDoc.embedFont(customFont2);
    const cusFont3 = await pdfDoc.embedFont(customFont3);


    // Now you can draw your text on your document, just an exemple ...
    firstPage.drawText('Write something', {
        x: 217,
        y: 210,
        size: 12,
        font: cusFont1,
        color: rgb(0.95, 0.1, 0.1),
    });

    firstPage.drawText('Write another thing, {
        x: 230,
        y: 140,
        size: 20,
        font: cusFont2,
        color: rgb(0.95, 0.1, 0.1),
    });

    // Write the Date on the document...
    let todayDate = new Date();

    firstPage.drawText(todayDate.getDate() + ' ' + months[todayDate.getMonth()] + ' ' + todayDate.getFullYear(), {
        x: 62,
        y: 70,
        size: 12,
        font: cusFont3,
        color: rgb(0.95, 0.1, 0.1),
    });

   // Like in the official documentation, this is you final document
    const pdfBytes = await pdfDoc.save();

    // Save the doc where you want to. I recommend you tu use a try/catch for safety...

    try {
        fs.writeFileSync(path/to/destination/where/saving/the_name_of_your_pdf_file.pdf', pdfBytes);
        return res.json({
            "result": true,
            "response": {src: '/where/saving/the_name_of_your_pdf_file.pdf'}
        })
    } catch (e) {
        return res.json({
            "result": false,
            "response": {error: e}
        })
    }
});

Voilà,
I hope you will understand how to add custom fonts in pdf-lib with Node.js.

If you need more information about FileSystem, check this => https://nodejs.org/api/fs.html

Thanks for watching, reading, sharing, enjoying this comment, and don't forget to say thank you to @Hopding for this nice and cool project .

🙋🏾‍♂️

Was this page helpful?
0 / 5 - 0 ratings

Related issues

emilsedgh picture emilsedgh  ·  5Comments

zimt28 picture zimt28  ·  5Comments

fatso83 picture fatso83  ·  3Comments

matthopson picture matthopson  ·  4Comments

keyhoffman picture keyhoffman  ·  4Comments