Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Are you building out a pen that needs some typographic love and the beauty that is custom web fonts? You can totally use them in CodePen.

Google Fonts

These are extremely easy to use. Find the one you want and click Quick Use.

Click the @import tab and copy the code it gives you.

Put that the the top of your CSS in CodePen.

Then use the CSS they give you right below that with the font-family name on any selectors you want to use that font on.

Works a treat:


You can also use fonts from Typekit. Create a new or using an existing kit. Add some fonts and open up the Kit Editor. Click Kit Settings and make sure s.codepen.io is listed under Domains.


Then close that and click the Embed Code link. That will give you some copy-and-paste code.


The easiest thing from here is to just drop that into the HTML editor. Alternatively you could link up that JS file as an JS external resource and put the try{} block into the JS editor.

Close that and click the “Using font in CSS” link under the Selectors section. That bring up this popup where you can copy and paste CSS to use those font families:

Works great eh?

Check out this Pen!