Request interception causes web fonts pending forever

Steps to reproduce

• Puppeteer version: 5.5.0
• Platform / OS version: Windows 10, Ubuntu 18, MacOS Big Sur
• URLs (if applicable):
• Node.js version: 12.19.0

What steps will reproduce the problem?

Example Script: https://github.com/mstr-pezhang/puppeteer-issue/blob/36cddcc721ec0cf228f213f72dce2addcd5e223d/test/webfont.spec.ts

1. Create a font-face like https://github.com/mstr-pezhang/puppeteer-issue/blob/36cddcc721ec0cf228f213f72dce2addcd5e223d/static/global.css
2. In the webpage, do not directly use the web font, but generate a DOM node to use it. https://github.com/mstr-pezhang/puppeteer-issue/blob/36cddcc721ec0cf228f213f72dce2addcd5e223d/static/add-text.js
3. Enable request interception. For each request, simply call request.continue();.
4. Open DevTools and go to Network tab.
5. See that the font cannot be correctly rendered because the URL is pending forever.

What is the expected result? The web font can be successfully loaded and rendered.

What happens instead? The default system font is used instead, while the web font is pending forever. https://github.com/mstr-pezhang/puppeteer-issue/actions/runs/443832997

I’m not sure if it is a Chromium issue, but there are similar issues like #4208 and #5003

[slawiko]

@benallfree probably that could help:

I had similar issue with Font request pending for more than 30sec (I had timeout 35s). After upgrade on 13.0.0 this issue is completely gone

[dobesv]

In our project we are setting request interception on as right after calling newPage() and before opening any pages but we are still having this problem.