Search code examples
firebasegoogle-font-apiwebfont-loader

Google Fonts 403 from Firebase hosted app

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)
Solution

  • 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.