Responsive Order Summary Component with CSS flexbox

Community feedback

• 

  Boots 😺•1,590

  @adityaphasuPosted over 1 year ago

  Hi there! Good job on completing the challenge! 🙌🏻

  The issue with the font weight is that you have only imported the default font from google fonts (i.e the font weight 400), so when you try to apply the font-weight: 900 to the heading it doesnt really get applied since you dont have that font weight. Unlike the default fonts where we can apply font weights to them without any worries, we have to import the font weights as well for any imported font to use the font weights.

  In the style guide you can see that they have specified 500,700 and 900 so basically you have to pick the font with those font weights from google fonts. (the font weights in google fonts are specified along with the font at the right hand side.)

  🎯 In your case it'll be:

  @import url('https://fonts.googleapis.com/css2family=Red+Hat+Display:wght@500;700;900&display=swap');
  
  

  • After just this change your font weight properties should work!

  Also only the font weights you import with the font will work and not others, so like now if you try font-weight: 400 it wont work since you have only the font with weights 500,700 and 900.

  I hope this clarifies your doubt. 🙂

  Happy Coding!🕺🏻

  Marked as helpful

  1

  ---

  

  Vishnu_31•230

  @vishnu-31Posted over 1 year ago

  Thak you @adityaphasu. I get the idea now. Thanks for the clarification. IT is helpful.

  1