I'm using Google fonts in an app. When I request fonts from my local development environment, it returns fine. But when I request from a Firebase hosted app, I get a 403 due to the Referer header.
Request URL:
https://fonts.googleapis.com/css?family=Oswald%7CRubik%7CLuckiest+Guy%7CBlack+Ops+One%7CCaveat+Brush%7COpen+Sans%7CSource+Code+Pro%7CAudiowide%7CArial+Blank%7CCinzel%7CPlay%7CAnton%7CPlayfair+Display%7CHelvetica%7COpen+Sans:bold%7CCinzel:black
When I make the request with this header (automatically applied) it works:
Referer: http://localhost:3000/
When I make the same request with this one, it fails. (Tested with app + Postman.)
Referer: https://myapp-dev.web.app/
Is there a way to change the Referer with webfontloader to be able to make this request?
WebFont.load({
google: {
families: fonts
},
classes: false,
active: onComplete,
inactive: onComplete,
timeout: 4000,
} as WebFont.Config)
Your request URL includes Arial Black and Helvetica, which are not hosted by Google Fonts.
The Google Fonts collection consists exclusively of free and open-source (FOSS) typefaces; proprietary families like Helvetica are not licensed to be propagated via Google Fonts.