Submitted 6 months ago

Results summary component main (data dynamically populated)

accessibility, sass/scss, bem

Denisse Joyce•290

@denissejoyce

A solution to the Results summary component challenge

Preview Code

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!

Code

Please log in to post a comment

Community feedback

P
markus•2,740
@markuslewin
Posted 6 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

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