Results summary component main (data dynamically populated)

Solution retrospective
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!
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@markuslewin
Hi!
Three changes:
- The value of
font-family
ofbody
has to match thefont-family
of the@font-face
, i.e. eitherHankenGrotesk
in both places, orHanken 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 usebolder
in the context of specifying a font face. I think it's better to map it to a numerical value, like800
.- The
url
s are written to point to the font files relative tomain.scss
, but they need to be written relative to the outputtedmain.css
thatindex.html
links to.url(../assets/fonts/static/HankenGrotesk-Medium.ttf)
(relative tomain.css
) orurl(/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 - The value of
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