DEV Community

Alteca
Alteca

Posted on

2

<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

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay