Is there a way to get fonts that do not come from or exist on the google fonts website to work with Codepen?

Question

I found fonts I like outside of the Google Fonts environment, but I'm having difficulty figuring out how to add them to the Codepen environment.

They worked great for me locally, just saving the fonts from "Font 1001" to a fonts folder in my css folder and using the following code to make them execute:

@font-face {
  font-family: "Ostrich";
  src: url("fonts/Oslo_II.ttf") format('truetype');
}

@font-face {
  font-family: "Ostrich-Bold";
  src: url("fonts/Oslo_II_Bold.tff") format('truetype');
}

@font-face {
  font-family: "Adler";
  src: url("fonts/Adler.ttf") format('truetype');
}

"Font 1001" provides a permalink to their fonts, but they don't use the url format the codepen seems to like and I can't find an alternative way to use non-Google Fonts.

Here is the format that codepen seems to only except:

@import url(https://fonts.googleapis.com/css?family=Tangerine);

Here is a permalink from "1001" Fonts:

http://www.1001fonts.com/oslo-ii-font.html

It has no ?family=fontname

So I guess that's a day ruiner.

Does anyone no how to get codepen to except the fonts I desire?