Шрифты не применяются в PDF-файле, созданном с использованием jsPDF из HTML-контента. ⇐ CSS

[Anonymous]

Я пытаюсь преобразовать содержимое HTML в PDF с помощью библиотеки jsPDF. HTML-файл содержит пользовательские шрифты, определенные с помощью @font-face с URL-адресами шрифтов в кодировке Base64. Однако при создании PDF-файла шрифты не применяются, и в PDF-файле используется резервный шрифт по умолчанию.
Вот пример моего кода:
index. HTML:

Код: Выделить всё

Custom Font PDF



@font-face {
font-family: 'LSTCNP+Noto Serif Bold';
src: url('data:font/woff2;charset=utf-8;base64,d09xxaxadfdfdfdfGMg...cAAA==')
format('woff2');
}

@font-face {
font-family: 'GLQUUO+Noto Serif';
src: url('data:application/octet-stream;base64,AAEAAAANAIAAAwBQ..AA=') format('truetype');
}

.custom-font-bold {
font-family: 'LSTCNP+Noto Serif Bold';
font-size: 20px;
color: #333333;
}

.custom-font-regular {
font-family: 'GLQUUO+Noto Serif';
font-size: 16px;
color: #555555;
}



Generate PDF

This is using the Bold Custom Font
This is using the Regular Custom Font


const { jsPDF } = window.jspdf;

function convertToPDF() {
const doc = new jsPDF();

const elementHTML = document.querySelector("#contentToPrint");

doc.html(elementHTML, {
callback: function (doc) {
doc.save("custom-font.pdf");
},
margin: [10, 10, 10, 10],
html2canvas: {
scale: 0.8, // Adjust scaling factor if needed
},
x: 10,
y: 10,
});
}

Проблема:
Шрифты отображаются правильно, когда я открываю HTML-код в браузере.
Что я пробовал:
Использовал шрифты .woff2 и .ttf в правиле @font-face.
Проверена кодировка шрифтов Base64.
Пытался настроить параметры html2canvas (масштаб, ширина окна).
Однако, когда я создаю PDF-файл с помощью jsPDF, пользовательские шрифты не применяются, и возвращается системный шрифт по умолчанию.
вот моя ссылка на stackblitz
Как мне заставить jsPDF подбирать пользовательские шрифты, определенные в HTML? Я что-то упускаю?
Заранее спасибо!

Подробнее здесь: https://stackoverflow.com/questions/792 ... ml-content