![](https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_900/Screenshots/m5lq5pxabntt7jeumcsg.jpg)
Design comparison
Solution retrospective
Creating this blog card was a great experience. It helped me deep dive the fundamentals of flexbox and simple animations. I would probably choose my own coloring scheme, so I can practice on color pairing.
What challenges did you encounter, and how did you overcome them?Since, we were giving assets of the Figtree
font, I wanted to use @font-face
rule to load the font. However, there was issues of not loading the fonts correctly.
To fix this, I went to Google Fonts and simply copy and paste @import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");
onto my stylesheet
and it worked!
I wanted to know why @font-face
rule didn't load correctly. Here is the code snippet:
@font-face { font-family: 'Figtree'; src: url('/assets/fonts/static/Figtree-ExtraBold.ttf') format('truetype'), url('/assets/fonts/static/Figtree-SemiBold.ttf') format('truetype'), url('/assets/fonts/Figtree-Italic-VariableFont_wght.ttf') format('truetype'), url('/assets/fonts/Figtree-VariableFont_wght.ttf') format('truetype'); }
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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