Skip to content
Submitted over 1 year ago

Results Summary Component built with Semantic HTML and CSS Properties

Zascu•140
@ZascuOfficial
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

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

  • visualdennis•8,375
    @visualdennissPosted over 1 year ago

    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
    @ZascuOfficialPosted over 1 year ago

    @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

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