Pagedjs: how to render PDF while keeping text selectable/editable?

Question

I am using pagedjs to render a pdf and using their starter kit: https://gitlab.coko.foundation/pagedjs/starter-kits/book-spread_esm

When I export a pdf via the page print function, the text is selectable as you would expect.

But when I change the font, the text is not selectable.

In other examples, they have changed the font and the pdf has rendered properly (text is selectable) example: https://gitlab.coko.foundation/pagedjs/starter-kits/book_avanced-interface

So I know this must be possible.

What I have tried

I initially imported the fonts from Google Fonts as follows:

Style.css:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;1,100;1,300;1,400;1,500;1,600&display=swap');

body{
    font-family: 'Montserrat', 'sans-serif';
}
...

The fonts render correctly, but text is not selectable.

Next, I looked at the advanced example with fonts and saw that they defined local fonts as follows:

Inside: /fonts/VG5000/stylesheet.css:

@font-face {
    font-family: 'VG5000';
    src:    url('VG5000-Regular_web.eot');
    src:    url('VG5000-Regular_web.eot?#iefix') format('embedded-opentype'),
            url('VG5000-Regular_web.woff') format('woff'),
            url('VG5000-Regular_web.woff2') format('woff2'),
            url('VG5000-Regular_web.ttf') format('truetype'),
            url('VG5000-Regular_web.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

Then it is used in /style-print.css as:

h1{
    font-family: 'VG5000';
    text-align: center;
}

So I mimicked this with my fonts (albeit a bit more complicated):

File structure in /fonts/Montserrat/:

static/
    \_Montserrat-Black.ttf
    \_Montserrat-BlackItalic.ttf
    \_Montserrat-Bold.ttf
    \_Montserrat-BoldItalic.ttf
    \_Montserrat-ExtraBold.ttf
    \_Montserrat-ExtraBoldItalic.ttf
    \_Montserrat-ExtraLight.ttf
    \_Montserrat-ExtraLightItalic.ttf
    \_Montserrat-Italic.ttf
    \_Montserrat-Light.ttf
    \_Montserrat-LightItalic.ttf
    \_Montserrat-Medium.ttf
    \_Montserrat-MediumItalic.ttf
    \_Montserrat-Regular.ttf
    \_Montserrat-SemiBold.ttf
    \_Montserrat-SemiBoldItalic.ttf
    \_Montserrat-Thin.ttf
    \_Montserrat-ThinItalic.ttf
Montserrat-Italic-VariableFont_wght.ttf
Montserrat-VariableFont_wght.ttf
stylesheet.css

Inside /fonts/Montserrat/stylesheet.css:

@font-face {
    font-family: 'Montserrat';
    src:    url('static/Montserrat-Thin.ttf') format('truetype');    
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src:    url('static/Montserrat-Light.ttf') format('truetype');    
    font-weight: 300;
    font-style: normal;
}


@font-face {
    font-family: 'Montserrat';
    src:    url('static/Montserrat-Regular.ttf') format('truetype');    
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src:    url('static/Montserrat-Medium.ttf') format('truetype');    
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src:    url('static/Montserrat-SemiBold.ttf') format('truetype');    
    font-weight: 600;
    font-style: normal;
}

This renders properly on the website, but on PDF the font does not load:

Web rendering:

PDF rendering:

It is the same as before, text is not selectable.

The final thing I have tried is looking in the docs, specifically searching font site:pagedjs.org, but there is nothing specific in the documentation about fonts and editable pdfs.

score 0 · Answer 1 · answered Mar 15 '23 at 14:08

This could lie on the browser you're using and its PDF printing function. When printing, do you use 'Adobe PDF' as your printing engine, or the native 'Save to PDF' option?

In my adventure with Paged.js, the book_avanced-interface template loaded with a custom font (Happy Karrik Variable) has these results:

On Firefox:

Save to PDF: Creates a buggy PDF with wrong text styles and duplicated glyphs. Text is selectable.
Adobe PDF: Unselectable text except for default webfotns, glyphs are vectorised almost well.

On Chromium:

Save to PDF (native): prints well, text is selectable and vectorisation is great
Adobe PDF: Text is poorly rendered, and unselectable.

Try out the native Save to PDF on a Chromium / Chromium based browser and see how it goes. It should output text you can select.

Pagedjs: how to render PDF while keeping text selectable/editable?

1 Answers1