Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Results Summary Component built with Semantic HTML and CSS Properties

Zascu 140

@ZascuOfficial

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, all!

I would like to know more about how fonts work and how I could've imported them easier rather than creating a font-face declaration for each and every weight of that specific font family.

Other than that, I think this project was relatively alright, since I learned how to use data attributes and make use of the CSS cascade.

Community feedback

P
visualdennis 8,375

@visualdenniss

Posted

Hello Zascu,

regarding importing fonts, you can use google fonts and import them like like so:

@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,500;0,700;1,800&display=swap");

@import should be at the top of ur css file like font-face, tho font-face gives you a bit more control.

You can then use them as usual with: font-family: "Hanken Grotesk", sans-serif;

Hope you find this feedback helpful!

Marked as helpful

0

Zascu 140

@ZascuOfficial

Posted

@visualdenniss

Thanks a lot!

I was also wondering how I could optimize utilizing external fonts, that can't be imported directly from Google Fonts.

I appreciate your feedback!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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