css grid

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 different font-family then you have to add those font-family where needed.

Also place root after CSS rest to prevent other problems.

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