Responsive Card Component with React and TailwindCSS
Design comparison
Solution retrospective
I added the correct font-family and font-weight, but it doesn't seem to look like the one from the Figma file, do you know what I'm doing wrong?
Community feedback
- @elaineleungPosted over 2 years ago
Hi James, it looks like you're using Next.js here, and so the link for the font family should go in the
Headcomponent in the Document (_document.js) file. I tried looking for it in your repo but couldn't see it; I did see you adding the web font link in your global styles, but that might not work here. I remember @KostasKv built this challenge also using Next.js and Tailwind; you can have a look at that here: https://www.frontendmentor.io/solutions/interactive-rating-tailwind-css-nextjs-first-time-trying-it-lFKFAcH4lhAbout your solution for this challenge, it looks fine to me, and the only suggestion I have is to see whether you can add in some logic for handling what happens when no rating gets selected but the user hits submit anyway.
By the way, it looks like you are using your repo for multiple FEM projects in Next.js. That might be OK since I also use one repo for all my FEM projects, except it's mostly in plain JS and no frameworks or libraries. The only thing I'm not sure about for you is when each project needs a different font family, and I wonder if that means you'd have to paste a bunch of web font links in your Document file. I looked at your Product Preview challenge, and it doesn't look like the Fraunces and Montserrat fonts there got used either. Anyway, I hope you get this sorted, so good luck!
Marked as helpful1@jte0711Posted over 2 years agoHi @elaineleung, thanks for the feedback!
Do you know why it doesn't work when we import it in global styles? I saw someone say the same somewhere about importing it in
<Head>(probably StackOverflow), but I thought importing in global style looks easier than that and it seemed to work (the font family looks different from the standard sans-serif) although doesn't look exactly the same like what it needs to look like.I'm thinking to import every font for every FEM project. I know it doesn't sound like a good way to do things, but I'm thinking to do that until it breaks my live website. Is there any other way you would like to recommend?
0P@markuslewinPosted over 2 years ago@jte0711 Hi! Imported rules must come before all other types of rules, except @charset rules. If you move it to the top it should work!
Marked as helpful2@jte0711Posted over 2 years agohi @markuslewin ! Thanks for the information! It works well.
2@elaineleungPosted over 2 years ago@jte0711 Glad this worked, thank you @markuslewin! The thought did cross my mind when I saw where the import tag was placed, but I thought maybe you tried placing it at the top already and didn't work so maybe you chose to place it there. Sometimes the easiest method is the one that solves the problem! Anyway, I'm glad the config in Tailwind worked out to bypass Next's document.
About your other question on having one repo in Next.js, I guess you can try it out and see whether it works for you! For me, the only issue I ran into was when I wanted to build something in Next.js but didn't want to bother with figuring out how to configure everything in the subfolder with GitHub, and I ended up creating a new separate repo just for that challenge. If you keep your stack consistent and also have a way to display fonts (which you now do), then it should be fine in theory! Good luck 🙂
1
Please log in to post a comment
Log in with GitHub
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