<link> vs @import, Which should you use to get Fonts

Intro

When you go to Google Fonts to get a font for your website, you saw two options. You can use either the link HTML element <link> or the CSS @import. When you decided you probably just stuck to the <link> element if you're a beginner in this area. In this article, you'll get to know all the pros and cons of using <link> and @import so stay here and read on.

The <link> element is a good way to get started when you have just one page that you need to have in the specific font you picked. I've used the <link> element a lot in my early days of using HTML, and it does work but does require you to paste it in all individual HTML files for it to function.

@import

Now my favorite way of importing a font into an HTML document, this will not only save time but also not take up as much space as the <link> element so if you don't like long HTML documents then you will like this method more. This is especially useful when making a website with only a few CSS files which allows you to save much more time than with the <link>

Conclusion

You should still take into consideration that both these tags get the same job done so if you're just making a small page it won't make any difference which element @import or <link> you use. But @import is the clear winner here because it is much more time consuming to use the <link> element