Design comparison
Solution retrospective
I don't know why but I couldn't use the second font it didn't recognize Family: [Fraunces]
Community feedback
- @hitmorecodePosted over 1 year ago
I took a look at your CSS and the problem is easy to fix.
/* This is what you have the problem is, that root is loading before import. Root is actually preventing import from loading. That's why the font is not showing */ :root{ --Darkcyan: hsl(158, 36%, 37%); --Cream: hsl(30, 38%, 92%); --Verydarkblue: hsl(212, 21%, 14%); --Darkgrayishblue: hsl(228, 12%, 48%); --White: hsl(0, 0%, 100%); } @import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@700&display=swap'); *{ margin: 0; padding: 0; font-size: 14px; color: var(--Darkgrayishblue); font-weight: 500; font-family: 'Montserrat', sans-serif; } body{ background-color: var(--Cream); }
Change to this and it should work just fine.
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@700&display=swap'); *{ margin: 0; padding: 0; } :root{ --Darkcyan: hsl(158, 36%, 37%); --Cream: hsl(30, 38%, 92%); --Verydarkblue: hsl(212, 21%, 14%); --Darkgrayishblue: hsl(228, 12%, 48%); --White: hsl(0, 0%, 100%); } body{ background-color: var(--Cream); font-family: Fraunces }
By adding
font-family
on the body, you don't have to add it on other places, because this will apply to the entire page. Only if you have to use two differentfont-family
then you have to add thosefont-family
where needed.Also place
root
after CSS rest to prevent other problems.Marked as helpful0@fernandojeffePosted over 1 year ago@hitmorecode thank you very much helped a lot! my how I wasted time to try to solve this and it was so simple thank you.
0 - @Parvez785Posted over 1 year ago
Hey, there congrats on completing challenge , You can try adding font fraunces in HTML markup in head.
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@500&display=swap" rel="stylesheet">Also you design is not responsive for mobile version, and remove black border displaying around button.
Let me know if this was helpful
Marked as helpful0@fernandojeffePosted over 1 year ago@Parvez785 Hello, I had left it as a 375px screen. that's why I wasn't going to change it to 600px, I think it's changed now. and thanks for the comments, it helped a lot! I removed the edge of the button as well.
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