Frontend Mentor | Result Summary Component Solution coding challenge solution

Dean• 480

@Deanogit

Posted 9 months ago

Hi @wahidullahsharify,

Well done for completing this challenge and submitting your solution

I noticed something that you might be interested in, it is concerning the use of the correct font in your project.

I see you're using TailwindCSS in your project so its possible to add the font in the tailwind.config.js file in your repository.

Inside the tailwind.config.js file, look for the theme: {}
Inside the theme: {} add a new object called fontFamily: {},
Inside fontFamily: {} add sans: [ ' " Hanken Grotesk " , sans-serif ' ]

This will add the Hanken Grotesk as the first font to render, if the browser can download this font from the Google Fonts API or links to a file in the repository.

In this example, we can connect to the Google Fonts API, by going to Google Fonts Webpage,

search for the font we need
select which weights we need
and copy the link provided

Now paste these links inside the <head></head> element. These will be loaded by the browser when the page loads, making them available to be rendered.

It should end up looking something like this

<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=Hanken+Grotesk:wght@500;700;800&display=swap"
      rel="stylesheet"
    />

I hope this all makes sense, if you have any questions please let me know

Above all, great job building your solution to this challenge!

Result Summary Component Solution

Design comparison

Community feedback

Please log in to post a comment

Join our Discord community