google / google/fonts

Fonts Effects Beta mask images served from themes.googleusercontent.com fail due missing CORS

Open
#5,189 0 comments 0 reactions 0 assignees View on GitHub
I API / Website / Platform I Request I Tools / workflow / repo
Dominant language
HTML
Stars
20.5k
Forks
2.9k
Avg merge
1d 21h
Merged PRs (30d)
95

Description

**Issue description:**

![Google Chrome Browser window navigated to linked page showing content that reads 'Here is a complete listing of all the font effects that we offer:' followed by table of four columns: Effect, API Name, Class Name, and Support. First content row displays black bold word "Anaglyph" with red shadow on the left and cyan shadow on the right. Its api-name is anaglyph, Class Name is "font-effect-anaglyph" and support is "Chrome, Firefox, Opera, Safari". Following rows have first example cells empty, like the second one with "brick-sign" Api Name and "Chrome, Safari" Support. There are Devtools console on the right showing cascade of errors like Access to image at 'https://themes.googleusercontent.com/static/patterns/brick-sign.png' from origin 'https://developers.google.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.](https://user-images.githubusercontent.com/1761395/184417793-7e3731e3-cf7b-408f-8807-4f079110dabf.png)

**To Reproduce** visit https://developers.google.com/fonts/docs/getting_started#enabling_font_effects_beta in Google Chrome or similar browser.

**Expected behaviour:** masked text samples visible / readable, like currently visible in [archived snapshot](http://web.archive.org/web/20190801003508/https://developers.google.com/fonts/docs/getting_started#enabling_font_effects_beta)

![Fragment of the same table at the archived page. "Brick sign" is now visible as dark-red text with lighter ridges pattern resembling brick masonry](https://user-images.githubusercontent.com/1761395/184421610-3716af16-4ee6-43d4-8444-313fc98fa3d1.png)

(**Additional context:**) I've posted this problem as a snark illustration of what I see as a specification flaw (failed mask response makes whole target element invisible) in https://github.com/w3c/fxtf-drafts/issues/130#issuecomment-1213419909

---

Good move here would obviously be to move mask image files next to font files to avoid server configuration mismatch (and possible security firewalls blocking of googleusercontent domains). Or retiring/ending this beta experiment altogether.

Oh, or adding CORS headers for themes.googleusercontent.com responses is also an option.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.