Design comparison
Solution retrospective
I know pixel perfection is nearly if not completely impossible, but I felt like there was a way to get the text to look more similar to the design. Is there something I could have done better with that?
Also I was wondering if I could get an explanation of the difference (if there is any) between doing @import in CSS and rel=preconnect in HTML for implementing a font?
And of course, if there is any other feedback, I'm happy to read it!
Community feedback
- @correlucasPosted over 2 years ago
👾Hello Kenisa, congratulations for your solution!
Answering your question:
The difference between the insert the font by the HTML inside the
<head>with preconnect and into the CSS sheet with@importis that using the first method with preconnect the font-family load faster as thepreconnectsays to the html to read that information first.There's a common use that people prefer just to drop the font code
@importinto the css because is really fast to do that instead than doing that on the html.This article explain better how to make fonts load faster and the difference between these methods: https://sia.codes/posts/making-google-fonts-faster/
Hope it helps with your doubt Kenisa, happy coding!
Marked as helpful1@KenisaReneePosted over 2 years ago@correlucas Awesome! Thanks for taking the time to answer my question and provide a link with more information!
1@correlucasPosted over 2 years ago@KenisaRenee You're welcome Kenisa, I was wondering the same question these days, but even knowing which method is faster I still using @import just because is practical.
Happy to hear that was useful, happy coding.
1
Please log in to post a comment
Log in with GitHub
Join 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