Kevin Powell - Community•3w ago

How to correctly import fonts

Hey, if I have some @font-face declarations inside of a css file and import the css file in the html, I understand that this shouldn’t cause a problem because the assets wouldn’t load sequentially since they’re being imported through the html, thus not blocking the page render if it takes too long, but should I be importing fonts using a different method? Perhaps a link tag if that exists for this? If so, how do i still get the benefits of @font-face? Thanks in advance

6 Replies

✫𝕽𝖆𝖌𝖊𝖗 ✫•3w ago

If you're using custom fonts, @font-face gives you more control, and it’s fine to include it in a CSS file. For web fonts like Google Fonts, use the <link> tag for simplicity and faster setup. You can also combine both methods—preload the font with <link> and define it with @font-face to optimize loading times.