Fix Google Fonts corruption from incorrect text/html mime type #2068

bhokaremoin · 2025-12-16T19:54:10Z

What does this PR do?

Fixes Google Fonts being corrupted when fonts.gstatic.com returns font files with incorrect content-type: text/html header.

Changes

Added detectFontMimeType() utility function in packages/core/src/utils.js that uses magic bytes detection to identify font formats (WOFF, WOFF2, TTF, OTF)
Updated saveResponseResource() in packages/core/src/network.js to detect Google Fonts served with text/html mime type and override with the actual font mime type
When a Google Font is detected with incorrect mime type, the code now triggers a direct request to get properly encoded binary content
Added comprehensive unit tests for detectFontMimeType() utility
Added integration tests for Google Fonts handling in the discovery flow

Why?

Google Fonts API sometimes returns font files with content-type: text/html instead of the correct font/* mime type. This causes Percy CLI to process these font files as HTML, leading to corruption of the binary font data.

Jira Ticket

https://browserstack.atlassian.net/browse/PPLT-4742

Related PRs

render-cache-worker fix: https://github.com/percy/render-cache-worker/pull/429

packages/core/src/network.js

…ng sanitization Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

…ont-issue

this-is-shivamsingh · 2025-12-18T09:30:59Z

packages/core/src/utils.js

+// Handles Google Fonts MIME type detection and override
+// Google Fonts sometimes returns font files with text/html mime type
+// This function detects the actual font format from the file content
+export function handleGoogleFontMimeType(urlObj, mimeType, body, log, meta) {


const FONT_HOST_PATTERNS = [
/fonts.gstatic.com$/,
/fonts.googleapis.com$/,
/googleapisserver.com/fonts/i,
/use.typekit.net$/, // Adobe Fonts
/fonts.adobe.com$/,
];

function isKnownFontProvider(urlObj) {
return FONT_HOST_PATTERNS.some(pattern =>
pattern.test(urlObj.hostname + urlObj.pathname)
);
}

something like this i was saying
FONT_HOST_PATTERNS -> this array you can get it from env or config file, i will say add 1 config under discovery

discovery: fonts-domains: - fonts.gstatic.com - adobefonts.com

default you can add fonts.gstatic.com

These are some of the font provider

https://fonts.googleapis.com/css | Free, large library, easy embed -- | -- - Bunny Fonts | https://fonts.bunny.net/css | Privacy-focused, Google Fonts alternative - Cloudflare Fonts | https://fonts.cloudflare.com | Serve fonts from your domain, privacy - CDNFonts | https://www.cdnfonts.com | 30,000+ free fonts, CDN hosted Font Awesome | https://kit.fontawesome.com | Icon fonts, free & paid options - Adobe Fonts | https://use.typekit.com | Premium fonts, cloud hosted Typography.com | https://typography.com/webfonts - https://fonts.googleapis.com/css Free, large library, easy embed - Bunny Fonts https://fonts.bunny.net/css Privacy-focused, Google Fonts alternative - Cloudflare Fonts https://fonts.cloudflare.com/ Serve fonts from your domain, privacy - CDNFonts https://www.cdnfonts.com/ 30,000+ free fonts, CDN hosted - Font Awesome https://kit.fontawesome.com/ Icon fonts, free & paid options - Adobe Fonts https://use.typekit.com/ Premium fonts, cloud hosted Typography.com https://typography.com/webfonts

This you can push in followup PR

this-is-shivamsingh · 2025-12-18T09:32:29Z

packages/core/src/utils.js

+    const detectedFontMime = detectFontMimeType(body);
+    if (detectedFontMime) {
+      mimeType = detectedFontMime;
+      log.debug(`- Detected Google Font as ${detectedFontMime} from content, overriding mime type`, meta);


Suggested change

log.debug(`- Detected Google Font as ${detectedFontMime} from content, overriding mime type`, meta);

log.warn(`- Detected Google Font as ${detectedFontMime} with incorrect mimeType ${originalmimeType}`, meta);

this-is-shivamsingh · 2025-12-18T09:34:48Z

packages/core/src/utils.js

+    }
+
+    // Check for OpenType signature: 'OTTO'
+    if (header === 'OTTO') {


header.toLowerCase() === 'otto'

in case header comes in lower, this will not get detected

this-is-shivamsingh · 2025-12-18T09:35:07Z

packages/core/src/utils.js

+    }
+
+    // Read the first 4 bytes as the file header
+    const header = buffer.slice(0, 4).toString('binary');


you can normalize header here, in lowerCase itself

this-is-shivamsingh · 2025-12-18T09:35:43Z

packages/core/src/utils.js

+// Returns the detected MIME type or null if not a recognized font format
+export function detectFontMimeType(buffer) {
+  try {
+    // Ensure buffer has at least 4 bytes


in follow up PR, add a comment

For checking a valid font file, the first 4 characters are font type

this-is-shivamsingh

👍 Approved, with conditional comments for follow up PR, before stable release

this-is-shivamsingh · 2025-12-18T09:44:08Z

packages/core/src/utils.js

+    if (header === 'wOFF') {
+      return 'font/woff';
+    }
+
+    // Check for WOFF2 signature: 'wOF2'
+    if (header === 'wOF2') {
+      return 'font/woff2';
+    }


Suggested change

if (header === 'wOFF') {

return 'font/woff';

}

// Check for WOFF2 signature: 'wOF2'

if (header === 'wOF2') {

return 'font/woff2';

}

obj = {

'wof2': 'font/woff2',

'otto': 'fonts/woff',

'0x000x010x000x00': 'font/ttf'

}

if obj[header]:

return obj[header]

elseif obj[header.[first 4 char code]:

return obj[header[first 4 char code]

return null

bhokaremoin · 2025-12-18T11:29:41Z

@this-is-shivamsingh ACK.
Will unblock the customer with this changes releasing in beta, will send a followup PR. and resolve this comments.

…sts (#2073) * resolving comments from PR #2068 * fixing lint * fixing coverage

overiding mimeType for google fonts request

6331516

bhokaremoin requested a review from a team as a code owner December 16, 2025 19:54

bhokaremoin requested review from pankaj443 and prklm10 December 16, 2025 19:54

github-advanced-security bot found potential problems Dec 16, 2025

View reviewed changes

packages/core/src/network.js Fixed Show fixed Hide fixed

bhokaremoin changed the title ~~overiding mimeType for google fonts request~~ Fix Google Fonts corruption from incorrect text/html mime type Dec 16, 2025

bhokaremoin and others added 6 commits December 17, 2025 01:27

Potential fix for code scanning alert no. 188: Incomplete URL substri…

f8b67c6

…ng sanitization Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

Merge branch 'master' of github.com:percy/cli into PPLT-4742-google-f…

9eba9d2

…ont-issue

adding test for network changes

a2c2d71

adding test

4a08a10

reverting test

ded7a27

refactoring

0f1146f

this-is-shivamsingh reviewed Dec 18, 2025

View reviewed changes

this-is-shivamsingh approved these changes Dec 18, 2025

View reviewed changes

this-is-shivamsingh reviewed Dec 18, 2025

View reviewed changes

bhokaremoin force-pushed the PPLT-4742-google-font-issue branch from f41fecf to 0f1146f Compare December 18, 2025 11:25

pankaj443 approved these changes Dec 18, 2025

View reviewed changes

bhokaremoin added the ✨ enhancement New feature or request label Dec 18, 2025

bhokaremoin merged commit 8d4474b into master Dec 18, 2025
94 of 95 checks passed

bhokaremoin deleted the PPLT-4742-google-font-issue branch December 18, 2025 15:02

bhokaremoin added a commit that referenced this pull request Dec 21, 2025

resolving comments from PR #2068

7031beb

bhokaremoin mentioned this pull request Dec 21, 2025

feat: Support custom font domains and add font MIME type detection tests #2073

Merged

bhokaremoin added a commit that referenced this pull request Dec 22, 2025

feat: Support custom font domains and add font MIME type detection te…

9e7ee7f

…sts (#2073) * resolving comments from PR #2068 * fixing lint * fixing coverage

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix Google Fonts corruption from incorrect text/html mime type #2068

Fix Google Fonts corruption from incorrect text/html mime type #2068

Uh oh!

bhokaremoin commented Dec 16, 2025 •

edited

Loading

Uh oh!

Uh oh!

this-is-shivamsingh Dec 18, 2025 •

edited

Loading

Uh oh!

this-is-shivamsingh Dec 18, 2025

Uh oh!

this-is-shivamsingh Dec 18, 2025

Uh oh!

this-is-shivamsingh Dec 18, 2025

Uh oh!

this-is-shivamsingh Dec 18, 2025

Uh oh!

this-is-shivamsingh Dec 18, 2025

Uh oh!

this-is-shivamsingh left a comment

Uh oh!

this-is-shivamsingh Dec 18, 2025

Uh oh!

bhokaremoin commented Dec 18, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	log.debug(`- Detected Google Font as ${detectedFontMime} from content, overriding mime type`, meta);
	log.warn(`- Detected Google Font as ${detectedFontMime} with incorrect mimeType ${originalmimeType}`, meta);

-    if (header === 'wOFF') {
-      return 'font/woff';
-    }
-    // Check for WOFF2 signature: 'wOF2'
-    if (header === 'wOF2') {
-      return 'font/woff2';
-    }
+     obj = {
+       'wof2': 'font/woff2',
+       'otto': 'fonts/woff',
+       '0x000x010x000x00': 'font/ttf'
+      }
+      if obj[header]:
+         return obj[header]
+      elseif obj[header.[first 4 char code]:
+        return obj[header[first 4 char code]
+       return null

Fix Google Fonts corruption from incorrect text/html mime type #2068

Fix Google Fonts corruption from incorrect text/html mime type #2068

Uh oh!

Conversation

bhokaremoin commented Dec 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Changes

Why?

Jira Ticket

Related PRs

Uh oh!

Uh oh!

this-is-shivamsingh Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

this-is-shivamsingh Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

this-is-shivamsingh Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

this-is-shivamsingh Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

this-is-shivamsingh Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

this-is-shivamsingh Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

this-is-shivamsingh left a comment

Choose a reason for hiding this comment

Uh oh!

this-is-shivamsingh Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

bhokaremoin commented Dec 18, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

bhokaremoin commented Dec 16, 2025 •

edited

Loading

this-is-shivamsingh Dec 18, 2025 •

edited

Loading