Offer a CSS font-face embed code for better performance.
- Dominant language
- HTML
- Stars
- 20.5k
- Forks
- 2.9k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 95
Description
#This issue also works for requesting features.
The current Google Fonts loader embed uses a render-blocking third-party request to fetch the font-face rules for fonts that can then be subsequently loaded by a site once they are used in a page. While this approach offers a means of referencing device-specific woff files, potentially saving some delivery weight, it adds significant delays to page rendering time that may not be worth the tradeoff.
It would be great if Google Fonts offered an embed that allowed users to reference fonts directly from their own CSS (or in a style block in their HTML) to save time.
**Describe the issue**
In the following repo, several reduced test cases compare the default loader to one using font-face directly, and the font files being referenced are the version currently served to windows desktop, which includes hinting. The hinting information is not necessary for some browsers/devices, but it does allow for a single woff file that could be referenced across devices to save a server-round-trip disambiguation step. The readme shows those findings.
https://github.com/scottjehl/google-fonts-testing
Quick findings on 4G (tested on WebPageTest) show potential for up to 1 second faster FCP times. This appears to be true of tests that use font-display swap or block, the latter of which tends to be preferred these days for smoother page loading.
**To Reproduce**
Compare the reduced test pages on GH pages or read the readme.
**Expected behavior**
Font loading should be possible without an up-front render blocking 3rd party request.
**Additional context**
Tests were run with a Windows Chrome browser UA to cause Google Fonts' default embed to serve a hinted file, for fair comparison to the font-face tests.
Related issue about stable font urls here: https://github.com/google/fonts/issues/1067
Contributor guide
Assessment
This issue has not been assessed yet.