How to load custom fonts on codepen [SOLVED]

1

Hi CodeCampers,

I just found the perfect font for my next project but unfortunately it is not available through public CDN like google fonts or font awesome.

The said font is this one and I am running out of ideas for loading it on code pen.

What would you do in a situation like this? Do you know any font that looks like this one but instead is available through a public CDN?

[utxeee@2016-11-26: I updated the post below with the answers to the questions I had previously placed so it might help other users struggling with this problem.]

Cheers,
utxeee.

2
  1. Go Pro (you can upload your own fonts)
  2. Switch from Codepen to somewhere else where you can upload fonts (you can do this for free on GitHub pages or surge.sh)
  3. Host your font yourself (You can do this easily if you have OneDrive, Dropbox, etc.)
3

Hi @IsaacAbrahamson,

Honestly, this is not an option, because I do not want to spend money on it.

I did not know this one, I suppose it works like uploading code right?
[utxeee@2016-11-26: Yes, it does.]

Well, will I be able to link to the uploaded font from Codepen or will I have to load the whole site to GitHub?
[utxeee@2016-11-26: The whole code should be pushed to GitHub, then you should activate GitHub Pages in order to make your site available to the world.]

I believe this one is not an option because they do not allow cross-origin requests and that is what happens when code pen tries to fetch the said font.

Nevertheless, thank you for your help, I will take a look at option 2.

Cheers,
utxeee.

1 Like
4

It worked for me… maybe the have changed it since I did a project requiring that.