Estoy tratando de crear archivos PDF de forma dinámica usando la biblioteca del titiritero, pero el pdf que se genera no usa las fuentes personalizadas (.woff), sino que usa la fuente predeterminada del sistema, es decir, Times New Roman.

Utilicé Next.js para crear el sitio web e hice una configuración bastante complicada para cargar fuentes personalizadas junto con componentes de estilo lateral. Mejor si no tuviera que meterme con la configuración de Nextjs, pero luego lo que sea que haga que funcione.

Incluso agregué un retraso (tiempo de espera) solo para asegurarme de que las fuentes se descargaron correctamente antes de generar el pdf, pero fue en vano. Sin embargo, tomar capturas de pantalla muestra las fuentes personalizadas correctas.

1. ¿Cómo hacer que las fuentes personalizadas aparezcan en el pdf?

2. generar pdf hace que aparezcan colores de fondo detrás de algunos divs, ¿cómo depuro eso o cuál podría ser el problema, ya que no aparecen esos colores de fondo detrás de las imágenes en la página web/captura de pantalla?

A continuación se muestra el código con el que estoy trabajando para crear pdf.

Código titiritero:

 const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch({headless: true}); const page = await browser.newPage(); await page.goto('https://threads-web.vercel.app/threads/1385978750743973894', { waitUntil: 'networkidle2', }); // const document = await page.evaluate(() => document); // console.log(document.fonts) ----- This also returns undefined try { await page.screenshot({ path: 'beforeTimeout.png' }); await page.waitForTimeout(15000); await page.screenshot({ path: 'afterTimeOut.png' }); await page.evaluateHandle('document.fonts.ready'); await page.pdf({ path: 'hn.pdf', format: 'a4' }); } catch (err) { console.log(err) } await browser.close(); })();

Siguiente.js: _app.js

 const GlobalStyle = createGlobalStyle` @font-face { font-family: 'ProximaNova-Regular'; src: url('/fonts/ProximaNova-Regular.woff') format('woff'); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: 'ProximaNova-Bold'; src: url('/fonts/ProximaNova-Bold.woff') format('woff'); font-style: bold; font-weight: 700; font-display: swap; } `; function MyApp({ Component, pageProps }) { const [open, setOpen] = useState(false); return ( <> <ThemeProvider theme ={{colors: colors.light, bp: bp}}> <GlobalStyle /> <Layout open={open} setOpen={setOpen}> <Component {...pageProps} /> </Layout> </ThemeProvider> </> ); }

¡Cualquier ayuda sería muy apreciada! ¡Gracias!