For the codepen output, if you want to add fonts, like google fonts, you can do that in more than one way.
Using Link
Go to Settings, click on the HTML tab, if not already selected, and add the font link in Stuff for Head.
Using @import
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.