DEV Community


Posted on

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


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.


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>


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

Latest comments (0)