It has been observed that when loading external fonts on chrome, the font url is not exposed with the Performance API, This has lead us to consider various options to bypass this.
- Fetch the stylesheet via JS and parse it to extract all the font rules
- Print font CSS on page to expose font urls
- Fetch the stylesheet via PHP and parse it to extract all the font rules then send this to the beacon.
However, the first 2 options are not without cons for the first, we'll need to consider another overhead don by fetch API to get the CSS and also CORS issue. The Second might lead to increased page size in terms of large font stylesheet or several font styles used on a page.
We settled for the third because we'll parse the stylesheet in a single request without creating an overhead and having to print it to the page, Then match all the font properties just like it was done here and pass the return value containing an array of fonts and their properties as a custom data to the beacon script to process.
It has been observed that when loading external fonts on chrome, the font url is not exposed with the Performance API, This has lead us to consider various options to bypass this.
However, the first 2 options are not without cons for the first, we'll need to consider another overhead don by fetch API to get the CSS and also CORS issue. The Second might lead to increased page size in terms of large font stylesheet or several font styles used on a page.
We settled for the third because we'll parse the stylesheet in a single request without creating an overhead and having to print it to the page, Then match all the font properties just like it was done here and pass the return value containing an array of fonts and their properties as a custom data to the beacon script to process.