DEV Community

Alteca
Alteca

Posted on

<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 definitely saw two options. You can use either the link HTML element <link> or the CSS @import. When you decided you probably just sticked 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 to my favorite way of importing a font into a 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 definitely 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 exactly 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

Top comments (0)