Johnny Gérard• 640
@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
0
MercySitienei• 20
@MercySitienei
Posted
Thank you @johnnygerard
0
