0

For a coding challenge, I need a font to be loaded into p5. The challenge, however, can only be coded using codepen. Due to this (and my lack of codepen pro), I needed to find an alternative to loading a font. I decided to host it on my website, and upon trying the link in the loadFont() function, it would not load. My pen is included below.

https://codepen.io/arman311/pen/XobKBL

Edit: I tried @Elliot-Robson's fix, now I get this error:

The page at 'https://codepen.io/arman311/pen/XobKBL' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint '.../fonts/Roboto-Regular.ttf'. This request has been blocked; the content must be served over HTTPS.

fig
  • 364
  • 2
  • 11
  • You appear to be hitting some CORS issues. Hit F12 on the code pen page and you should see the errors. `Access to XMLHttpRequest at '...' (redirected from '.../Roboto-Regular.ttf') from origin 'https://s.codepen.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource`. Basically your server is not allowing client side access to that file. You'll need to configure your server to return the appropriate CORS header. – Eliott Robson Dec 13 '18 at 16:31
  • I am new to hosting my own files, how would I do that? – fig Dec 13 '18 at 16:33
  • Which server type are you serving files with? Nginx? Apache? – Eliott Robson Dec 13 '18 at 16:34
  • I am using a cPanel linux server. I don't know whether it is Nginx or Apache. – fig Dec 13 '18 at 16:42
  • Also, what are the negative implications of enabling CORS? – fig Dec 13 '18 at 16:42
  • If you're trying to use Roboto: don't use a custom hosted version at all. Use the [normal google webfont](https://fonts.google.com/specimen/Roboto) one. Go through the motions to get the .css, then open that in a new tab so you see the actual `@font-face` rule and then use the URL for your font from there. Also note that `ttf` fonts [were never a great idea](https://stackoverflow.com/questions/36105194/are-eot-ttf-and-svg-still-necessary-in-the-font-face-declaration/36110385#36110385), but since WOFF and then WOFF2 became established, are a _bad_ idea, so just use the WOFF2 version. – Mike 'Pomax' Kamermans Dec 13 '18 at 17:52
  • Would that work with p5? – fig Dec 13 '18 at 17:58
  • Sadly, that would not work. P5 does not support WOFFs – fig Dec 13 '18 at 18:14

1 Answers1

0

As the actual issue is a CORS problem (and your server appears to use Apache) please try creating a .htaccess file in the same folder as your fonts.

Inside this file add the following:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET"

This will allow any origin to access anything in that file.

CORS is designed to stop users browsing a different website from being able to load data from your website (as cookies are attached, if they are logged in - they will get the same data as if they were logged in). This is most often exploited by making POST requests (but not always) on a users behalf.

As it should only affect the fonts folder this should be relatively safe to achieve, just make sure to remove the htaccess file when the challenge is over to avoid people using your fonts without CORS for free.

Eliott Robson
  • 960
  • 9
  • 20
  • I tried doing that and it did not work. I also tried putting a colon on the first one and it did not change anything. – fig Dec 14 '18 at 16:04
  • I am now getting this error: The page at 'https://codepen.io/arman311/pen/XobKBL' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.armancodes.com/fonts/Roboto-Regular.ttf'. This request has been blocked; the content must be served over HTTPS. – fig Dec 14 '18 at 16:05
  • 1
    The best option I can recommend is to contact your host in order to enable https (lets encrypt certificates are free) and cors for that folder. – Eliott Robson Dec 14 '18 at 16:07
  • This fixed one problem but caused another. Since it answered my question, I am marking as solved. – fig Dec 15 '18 at 01:16