Support Google Fonts CSS API v2

[baderj]

Google released a new version of their API https://developers.google.com/fonts/docs/css2. On the same guides page, they link to this project as the official web font loader. As far as I can tell, it won't work with the new APIs which means variable fonts from Google fonts are not supported.

It would be great if the project would also support version 2, since the official Google guides link to this repo as the recommended webfont loader.

[phox4ever]

I ran into the same problem. You can change the API URL it's using by adding:

WebFont.load({
    google: {
      api: 'https://fonts.googleapis.com/css2',
      families: ['Droid Sans', 'Droid Serif']
    }
});

[reginna-chao]

It's not work for me, if I want to use two fonts with special font weight and display.

Certain URL is: https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700;900&family=Poppins:wght@400;700&display=swap

Test1:

WebFont.load({
	google: {
	    api: 'https://fonts.googleapis.com/css2',
	    families: ['Noto+Sans+TC:wght@400;700;900','Poppins:wght@400;700&display=swap']
	}
});

Get URL: https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700;900&Poppins:wght@400;700&display=swap

Test2:

WebFont.load({
	google: {
	    api: 'https://fonts.googleapis.com/css2',
	    families: ['Noto+Sans+TC:wght@400;700;900&family=Poppins:wght@400;700&display=swap']
	}
});

Get URL: https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700;900&family=Poppins&subset=wght@400;700&display=swap

How to get certain URL?

[nuthinking]

@ReginnaChao you shouldn't definitely specify the families in the same way you specify the url of the CSS. In theory the library should generate the url under the hood.

[nuthinking]

I also have issues with v.1 but v.2 doesn't seem to be fully supported. I nudged the team to try to find out more. It sucks there isn't a properly supported alternative.

[akshaybosamiya]

I ran into the same problem. You can change the API URL it's using by adding:

WebFont.load({
    google: {
      api: 'https://fonts.googleapis.com/css2',
      families: ['Droid Sans', 'Droid Serif']
    }
});

I'm also facing the same issue. It won't work for me. It returns 400 from webfont.js while providing api paramerter with new endpoint for version 2 of google fonts api.

[theprojectsomething]

@phox4ever's solution should work where you are only requesting a single font, however it won't work where you need multiple fonts. Basically, the seperating syntax has changed so where it was family=font1|font2 it's now family=font1&family=font2.

I've created a PR (#437) that resolves the above by letting you specify the API version you are targeting, as well as incorporating other google-only features such as display and effects.

Check out the updated readme to see how the proposed API works. If you're desperate you can hotlink the file directly from github: https://cdn.jsdelivr.net/gh/theprojectsomething/webfontloader@feature/google-fonts-v2/webfontloader.js ... tho I would recommend hosting it yourself (or pinning the exact commit) to be safe.

[nuthinking]

@theprojectsomething the last merged PR was more than 3 years ago. What are the chances this is gonna land?

[theprojectsomething]

@nuthinking 😀 the project does look a little bit abandoned .. I figure enough people are using it in production to at least warrant a workaround!

[nuthinking]

@theprojectsomething your PR is great, maybe you should maintain a fork? 🤔

[lokesh-squareup]

You can still construct the v2 API URL yourself and pass it to the urls property. It's more manual work but depending on your situation it might still be the best option:

// Example href val: https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,500;1,400
const href = `https://fonts.googleapis.com/css2?${families.join('&')}&display=fallback`;

return {
	urls: [href],
	preloads: [{
		as: 'style',
		href,
	}],
};

[somratpro]

@theprojectsomething

You are a genius, do you know how to resolve this problem? Ensure text remains visible during webfont load

[theprojectsomething]

@somratpro sorry not sure that's related to this issue. tho my guess is that what you're asking for is likely the default behaviour. If you search FOUT (flash of unstyled text) in the gh issues you'll probably find some good info

[davelab6]

Use https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API instead

[nuthinking]

@davelab6 are you suggesting using the CSS Font Loading API in conjunction with Google Fonts Developer API (to get the URL of the files to load)? Any examples we could look at? I can see on GitHub code referencing Google static font files directly without Google Fonts Dev API, is this safe? Thanks! 🙏