Limiting the Font Weights and Styles to Improve Performance

To optimise your WordPress site’s performance, it’s best to load only the fonts your website actually uses. Here’s a step-by-step guide.

1. Go to Google Fonts: 👉https://fonts.google.com
2. Use the search bar to find a font (e.g., Roboto, Poppins, Lato, etc.), then click the font name to open its details page.
3. Click the ‘Get font’ button.
4. Click the ‘Get embed code‘ button.
5. On the left panel, click on ‘Change styles‘ and select the weights and styles you need (e.g., 400, 700 italic, etc.).
6. On the right side of the screen, under the Web tab, you’ll see a code block like this: <link href=”https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap” rel=”stylesheet”>
   Copy the URL inside the href attribute of the tag: https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap
7. Go to your WordPress dashboard, navigate to GreyboxPro>Fonts.
8. Paste the copied URL into the box labelled ‘Insert Google URL‘.
9. Click ‘Save changes‘.