Skip to content
Submitted 2 months ago

Results summary component main (data dynamically populated)

#accessibility#sass/scss#bem
P
Denisse Joyce•290
@denissejoyce
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

What are you most proud of, and what would you do differently next time?

I did the bonus challenge which was to populate the data dynamically.

What specific areas of your project would you like help with?

For the sake of learning, I wanted to ask for help RE: using local font via font-face. I tried doing that for this challenge but it didn't work for me (code is left commented in typography partial).

Any feedback regarding my code is highly appreciated too!

Community feedback

  • P
    markus•2,620
    @markuslewinPosted 2 months ago

    Hi!

    Three changes:

    • The value of font-family of body has to match the font-family of the @font-face, i.e. either HankenGrotesk in both places, or Hanken Grotesk in both places.
    • font-weight: bolder sets the weight of an element relative to the parent element, so I don't think it makes sense to use bolder in the context of specifying a font face. I think it's better to map it to a numerical value, like 800.
    • The urls are written to point to the font files relative to main.scss, but they need to be written relative to the outputted main.css that index.html links to. url(../assets/fonts/static/HankenGrotesk-Medium.ttf) (relative to main.css) or url(/assets/fonts/static/HankenGrotesk-Medium.ttf) (relative to root) should work better!
    @font-face {
  font-family: "Hanken Grotesk";
  src: url(../assets/fonts/static/HankenGrotesk-Medium.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Hanken Grotesk", serif;
}
    Marked as helpful
    0
    P
    Denisse Joyce•290
    @denissejoycePosted 23 days ago

    @markuslewin thank you, this helped!

    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