How to add custom fonts to Code Playground web?

Question

https://code.sololearn.com/WvKfaVUY4Aqo/#html

I tried using @font-face in CSS, this works on my localhost as well as my online server, but in code playground it doesn't, even if I linked the right path to my font?

Answer 1

I guess your are attempting to allow cross-origin linking through Php by modifying header... but even with opening your file in a Php project, this will fail. However, you've get some more information on the error here, in code playground:

Warning: Cannot modify header information - headers already sent by (output started at ..\Playground\:2) in ..\Playground\

... it seems that's not possible, even if you put opening tag at very first start/line of the code source ^^
Are you facing exactly the same error at your localhost? or this one is specific to playground?

Anyway, run it yourself:

https://code.sololearn.com/wy1CISp2Sesv/?ref=app

... and reading the error message in console, I rather understand that it's the font (the requested ressource) or at least the font host domain that are mandatory?

Answer 2

This error is specific to code playground, I had no problem at all in localhost/FTP. I guess that's not possible.

Thanks for your efforts though :D

Answer 3

Actually, you can.

Dumping headers from your server...no CORS headers:
https://code.sololearn.com/choOE8kwZEmk/?ref=app

You can take this route:
https://stackoverflow.com/questions/8719276

Or you have at least these additional options (all should work):

1. dl.dropboxusercontent.com (not www.dropbox.com) sets the correct headers (ValentinHacker uses dropbox a lot)
2. Fill in headers with a server that agrees to do that on your behalf (I am relying on the assumption that you are NOT circumventing protection because it is YOUR content):
@font-face {
font-family: Helvetica;
font-weight: bold;
src: url('http://cors-anywhere.herokuapp.com/http://justelisha.livehost.fr/helveticab.ttf');
}
3. Embed the font as BASE64 (it becomes text content; Burey, visph and I do this with images - fonts are no different)

I was able to use one of these methods to import your font here and your page rendered with square tittles.