Issue with Web Fonts in /1/screenshot Endpoint Rendering Empty Image #11
Description
Great project! It works perfectly in many cases. However, I encountered an issue when using web fonts in the HTML and calling the /1/screenshot API endpoint to render an image. The response image is generated without any content.
Steps to Reproduce:
- Send a request to the
/1/screenshotendpoint with the following HTML content:
{
"html":"<!DOCTYPE html><html><head><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Sofia\"><style>body { font-family: \"Sofia\", sans-serif;}</style></head><body><h1>Sofia Font</h1><p>Lorem ipsum dolor sit amet.</p><p>123456790</p></body></html>",
}
- The resulting image is empty, with no content displayed.
Cause:
It seems that the issue is due to the web fonts not being fully loaded before the image is generated, resulting in an empty output.
Solution:
To fix it, I added https://github.com/bedrockio/export-html/pull/10/files
by adding below code to make sure fonts are fully loaded before generating an image
// Wait for all fonts to be loaded
await page.evaluate(async () => {
await document.fonts.ready;
});
Noted: Rendering PDFs with web fonts works correctly, issue only image