Post Card Component in HTML & CSS

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

I am proud of having been able to deal with issues related to the use of self-hosted fonts. I believe I worked differently than expected in this challenge regarding fonts. Interestingly, I would like to learn how to use variable fonts.

What challenges did you encounter, and how did you overcome them?

Without a doubt, I spent the most time on the use of fonts. I tried unsuccessfully to load the fonts using:

@font-face {
    font-family: 'Figtree-ExtraBold';
    src: url('/assets/fonts/static/Figtree-ExtraBold.ttf') format('truetype');
}

Following a post on MDN I tried using the Fontsquirrel Webfont Generator to convert the TrueType format to woff and woff2 formats, but I only got a message saying that the font was corrupted. After searching a bit, I found an article mentioning the Transfonter conversion tool which worked without any issues. I ended up using the fonts in woff2 and woff formats.

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

I have a strong feeling that there was a much simpler way to solve this. I would like to know if others faced the same issue when importing fonts and how they resolved it.