@johnnygerard
Posted
Hello Mercy,
I recommend you use link
elements for Google fonts, instead of @import
.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit&display=swap" rel="stylesheet">
This will be a lot better in terms of performance. When you put the font URL within an external CSS stylesheet using @import
, you actually delay the loading. The browser first requests your main stylesheet from <link rel="stylesheet" href="./style.css">
and only when downloaded, it will then request your @import url('https://fonts.googleapis.com/css2?family=Outfit&display=swap');
.
When using relative URLs like href="./style.css"
, you can use the more compact form href="style.css"
. The ./
is implicit.
Marked as helpful
@MercySitienei
Posted
Thank you @johnnygerard