Design comparison
Solution retrospective
any form of feedback is appreciated
Community feedback
- @johnnygerardPosted 9 months ago
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 formhref="style.css"
. The./
is implicit.Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord