<link> tag and @import Which one should you use?

Most of us have come across something like this:

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');

while importing Google Web Fonts into our CSS. It's the way to import a certain style into our stylesheet for the sake of UX and UI.

However, this is not highly recommended when it come to Search Engine Optimization (SEO), this is because by doing so your webpage will automatically become heavier (therefore it would take extra few seconds in loading it's contents to your users)

Well, there's a way for you to avoid such problem. It's highly recommended to use <link>

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">

instead of @import If you're concerned about SEO and Performance, it's recommended to use <link> tag because it can preload the font therefore minimize the loading time.

Kindly note that, SEO and Performance are the key for your website growths and sustainability, hence choose appropriate systems that would give you an edge in today's competitive cyber environment.

Until next time friend, be safe