I'm testing my page's performance through GTmetrix and I noticed that the biggest element loaded on my page is the font-family. Is there a way to lower this somehow? Here is how I load my font:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap" rel="stylesheet">
If you're using Google Fonts just for a few words, consider using the text parameter in the URL. The font will then only be loaded for the specified letters/characters.
Let's say you wanna use the font for the word 'Welcome'. By inserting &text=Welcome in the URL, you can load the font just for the six different letters of this word:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap&text=Welcome" rel="stylesheet">
This will reduce the size of the font file considerably.
Of course, this will not work if you need the whole set of characters.