In codepen don’t use style tag… Any css should be under css section which you can see under the html section.
Also don’t put html tag in html section of codepen. You must only put what you would put under body in codepen…
As for how you would want to import fonts, use the css import like this (with your font)
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
You can find it under @import section of google fonts (it is right beside the link section
Hi @nigamarpita414, it’s how you’ve set up your boilerplate. In HTML, when you want to link to a font the link needs to be embedded within the head element. Alternately, you can use @import in CSS but it’s better to link to it because you don’t have to wait.
Review this for a better understanding of the tags in HTML boilerplate
Now after all that, codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
- The link to the font goes in the box labeled ‘Stuff for <head>’
With codepen, all your CSS styling goes into the CSS section. And don’t use the style tags in that section. It can cause issues.
For more information about how codepen works read their official documentation
As an aside, don’t try and recreate the sample projects. Make one that’s uniquely yours. The samples are there to show you one possible way. You’re encouraged to come up with your own.
Hope this helps.
Thankyou for guiding me through. That was helpful 
Thank you for helping me through. I thought cloning would be more challenging, although I’m gonna make my unique projects too