CSS @font-face directive in CodePen

CSS @font-face directive in CodePen



I’m trying to get my own fonts showing in CodePen … I am using @font-face in CSS. I’ve also tried to add it to the header under the Settings menu. That’s the latest state for the pen. If anyone could take a look I’d appreciate it. I really want to use arbitrary fonts, by hosting them elsewhere. Perhaps the problem is at Google, and maybe at CodePen. It looks like CodePen will assume a font in the header area is WOFF2, so I converted the TTF I had into that.

Oddly, it worked in one browser for one person on chat, and none of my browsers (FF, Chrome, Safari) nor on that person’s other browsers.

The CodePen: https://codepen.io/artifex-latrans/pen/aNevQV

Artifex Latrans


I would try to host it elsewhere (dropbox, github ,…). I usually have problems with direct links from google drive.

Also it looks like you have some extra stuff );} in your header

If you open up console, you will see error message:

The stylesheet https://accounts.google.com/ServiceLogin?continue=https://drive.google.com/st/auth/host/0B6McTfo6Fh87Y2JXRXo2Y21rRXc was not loaded because its MIME type, “text/html”, is not “text/css”