Got Thickness, Slant, and Width data by scraping website. Put sliders in Google Font App.

To scrape the contents of the website I first got all the elements with attribute ‘gf-font-style’ using this code.

The value of the attribute was a string which contained the font family, weight and style information. I parsed the string to extract these as three separate variables. This function helped for parsing the string also.

I then built up a list of functions which I could put in the console, and it would extract the weight, family and style of all the fonts on the page. I did this on each page for all the thicknesses, widths, and slants, and so I have all this data saved in arrays.

I built sliders in the extension to filter the data by thickness, width and slant using this new data.