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.