Ensure you are familiar with your browser’s Developer Tools. For this guide, we will assume you are using Google Chrome, but the process should be similar in other browsers.
Using the Script in DevTools
- Open DevTools: Right-click on your webpage and select ‘Inspect’ or press Ctrl+Shift+I (Windows/Linux) or Cmd+Opt+I (Mac) to open DevTools.
- Navigate to Console: Click on the ‘Console’ tab. This is where we will be working.
- Run the Script: Paste the script into the console and press Enter. The script will execute, and the results will be printed directly in the console.
Understanding the Output
The script outputs CSS-like rules for each font family found on the page, including all unique combinations of font size, font weight, and line height applied. Each rule is a class that you can use to reference the specific style combination.
Using the Data
With this data, you can:
- Audit Your Styles: Ensure that your webpage is using a consistent and optimized set of font styles.
- Clean Up: Identify and remove unused or redundant styles to improve performance.
- Standardize: Use the data to create a standardized style guide for your webpage or application.