For the codepen output, if you want to add fonts, like google fonts, you can do that in more than one way.
Go to Settings, click on the HTML tab, if not already selected, and add the font link in Stuff for Head.
This one is simple. Just add the
@import code to the CSS editor.
Personal favourite: Using Codepen’s CSS setting
In the Settings, click on CSS and scroll down to Add External Sylesheets/Pens, then add the link to the font.
You can now start using the font name in the
font-family CSS property, directly.