Mapping font url to font name - google-chrome-devtools

Question

How to get font-name based off font-url using puppeteer
I am using Network.requestIntercepted to get list of fonts that are being used on a given website. However, the response does not contain any information about the font family that is being used in the CSS.
Is there a way to get font-family name and the corresponding font url that is being used on the page?
await client.on('Network.requestIntercepted', async e => {
if (e.resourceType == "Font") {
console.log(e)
fontCollection.add(e.request.url)
}
While the response contains font details, it does not contain the font-family name
{ interceptionId: 'interception-job-14.0',
request:
{ url:
'https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjx4wWyWtFCc.ttf',
method: 'GET',
headers:
{ Origin: 'https://goldrate.com',
'User-Agent':
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/73.0.3679.0 Safari/537.36',
Accept: '*/*',
Referer:
'https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i' },
initialPriority: 'VeryHigh',
referrerPolicy: 'no-referrer-when-downgrade' },
frameId: '4127ABB5A3E704843D0AB4756C7507E4',
resourceType: 'Font',
isNavigationRequest: false }

Answer 1

You have two options:
Guess the font from URL and/or HTTP headers
Download the font file and inspect it
Option 1: Guess the font from URL and HTTP headers
By looking at the request information, you can see the font name at two positions. First, in the URL and second in the Referer:
URL
fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjx4wWyWtFCc.ttf
Referer:
fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i
From that information you can therefore find out which font is being used.
Option 2: Download the font file and inspect it
If the first option is not realiable enough (maybe you want to crawl other pages, too?), you can always download the file by using a tool like node-fetch when intercepting the request
and then parse the meta information of the font file.
The library fontkit is able to parse a ttf file and read its Metadata like familyName or fullName:
Code sample
const fetch = require('node-fetch');
const fontkit = require('fontkit');
(async () => {
const response = await fetch('https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjx4wWyWtFCc.ttf');
const buffer = await response.buffer();
const font = fontkit.create(buffer);
console.log(font.familyName); // "Lato"
console.log(font.fullName); // "Lato Regular"
})();
You could then do this inside your Network.requestIntercepted block to find out which font is being used.