Design comparison
Solution retrospective
This was my second challenge completed within 24 hours, I'm mostly glad that it now started to come in much quicker as I get more used to the attributes and their use.
What challenges did you encounter, and how did you overcome them?I find it hard to guess the correct position and size without more reliable guidance.
What specific areas of your project would you like help with?I feel like importing fonts is something I need to dive into more even though I keep re-reading the documentation each time, I don't feel like I know what I'm doing.
Community feedback
- @R3ygoskiPosted 7 months ago
Hello Kristina, first of all, congratulations, your project is very good, and almost similar to the proposed project.
The first tip I'm going to give you is, try using the Perfect Pixel extension, it helps a lot to make your project more closer to the proposed design.
Second tip, it's about importing fonts, it's not difficult and you don't need to worry about it, if you're importing from Google Fonts, just take the embed code and paste it into the head of your HTML.
Now, about font-face, this part may be a little more difficult and I believe this is where you are having difficulty, correct? Well, I'll put the font-face you wrote here and break it down.
@font-face { font-family:"Inter", sans-serif; src: url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap'); font-weight: 400, 600,700; font-style: normal; }
font-family
: You are setting the font family that you want to use, here's basically the name of your font, like "Inter-SemiBold", "Inter-Regular" and so on.src
: Here you pass the directory to your font or an url (as you did) .font-weight
: Here you are using 3 values, but you cannot do this, you need to create other 3 @font-face to use each of those weights. Shorting, font-weight just accept 1 value.font-style
: Here you define the Font Style, if it's italic, oblique or normal.
Here's a link about @font-face: W3School - Font-face.
Again, congrats for conclude this project, if something I said was unclear, please, comment below and I will try to help.
Marked as helpful1 - @kristinakasalovaPosted 7 months ago
Hello, Bernardo,
Thank you very much for your kind words. I got the Perfect Pixel extension, will test it in my next assignment (or even this one actually, and redo the screens).
As for the @font-face, I do follow the W3School examples, though usually get swayed by the Google fonts' copy code/embed section, that show it differently... :) Need to remember not to get fooled!
1
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