+ 4

How to add custom fonts to Code Playground web?

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?

16th Jul 2017, 8:33 PM
mexikodro thanksgiving samples 1/1
mexikodro thanksgiving samples 1/1 - avatar
3 odpowiedzi
+ 5
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?
16th Jul 2017, 9:06 PM
visph
visph - avatar
+ 4
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
16th Jul 2017, 9:09 PM
mexikodro thanksgiving samples 1/1
mexikodro thanksgiving samples 1/1 - avatar
+ 4
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.
16th Jul 2017, 10:51 PM
Kirk Schafer
Kirk Schafer - avatar