too many network requests for Google Fonts

[JohnRDOrazio]

When the Font select tries to load all of the Google Fonts previews, the browser cannot handle that number of requests. There is one css file for each font, each of which corresponds to one ttf file.

The limit of network requests, even for resources on the same website, for a page is 1000 I believe. However there are over a thousand fonts in the Google Fonts weblist now, so installing previews for each one of them means going over the limit.

I believe we need a more intelligent way of only loading previews for fonts that will be visible when first opening the font selector (say, 10 before and 10 after the current font).

I believe the best approach of all, would be to find a way to produce an image from the font preview, and then bring all the preview images together into one single image that you could then use as sprites, showing for each option in the font select the portion of image that corresponds to that font. That would mean a single network request rather than over 1000 network requests. And once the image is loaded, the Font select should be a lot more responsive I'm guessing...

[JohnRDOrazio]

This is not happening for the Font select in the Block editor, I'm guessing react probably already takes care of requesting only resources that are needed for what's on screen at the moment?