Custom fonts from the web?

NimrodYanai
NimrodYanai

I seem to have a problem imbedding fonts into my campaing's portal.

I am trying to use @font-face, but for some reason it won't read the code:


@font-face {
font-family: bgsherwood;
src: url(https://www.wfonts.com/download/data/2016/07/13/sherwood/Sherwood.ttf);
}

I even tried putting the font in the media folder and use it from there, but that doesn't seem to work either.



I checked the debugger, and I see an error message:

Access to font at 'https://www.wfonts.com/download/data/2016/07/13/sherwood/Sherwood.ttf'; from origin 'https://baldursgate-9.obsidianportal.com'; has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Anyone know how I can add fonts?

Thanks!

Comments

  • thaen
    thaen
    Posts: 656

    I could be wrong, but I don't think there is a way to use external fonts that aren't either TypeKit or Google Fonts.  If you want to use one of those, you can enter them at the bottom of the Campaign Settings -> Advanced tab page.

    Obsidian Portal Developer

  • thaen
    thaen
    Posts: 656

    Check out the "Custom Fonts" section of this OP help article for a bit more explanation:

    https://help.obsidianportal.com/article/183-custom-css-basics

     

    Obsidian Portal Developer

  • NimrodYanai
    NimrodYanai
    Posts: 69

    That's odd.

    Adding a font from an online source should be pretty easy with basic CSS.

    Even stranger, it seems to work on the phone, but not on PC:

  • thaen
    thaen
    Posts: 656

    As I understand it, CORS is a protection setup in the browser:

    https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

    So if it's working on the phone, then the browser on the phone is less stringent than the browser on the PC.

    Obsidian Portal Developer

  • NimrodYanai
    NimrodYanai
    Posts: 69

    Well, I looked online and tried to find a solution.

    I even added an htaccess file to the location where the fonts were saved, but that didn't seem to work either :(

    I asked in Stacksexchange, maybe someone there will have the answer.

  • NimrodYanai
    NimrodYanai
    Posts: 69

    Well, from everything I see, this is a CORS issue. I have a friend with a CORS add on that can see the font, but when he turns it off it disappears.

    The issue here is that the files are uploaded to the website, but are saved on a cloud server I assume you use (cloudshare or something?), which means when I call the font it comes from a different site and the browser CORS rules come into effect.

    I'm not sure why that would happen with the font and not all the images.

    Is there a way to upload files directly to the site domain so they won't be cross-source?

  • thaen
    thaen
    Posts: 656 edited August 15

    Here's a link on the reason it happens with fonts and not images:

    https://stackoverflow.com/questions/33208474/why-do-font-files-have-to-abide-by-cors-rules-but-images-dont

    The uploaded files are saved on cloudfront, which is the AWS (amazon) storage that the site uses.

    We don't have a way to upload files directly to the server.  I'm not a security expert (by a LONG shot), but I think this is all to try to keep fonts containing malware from being labeled as "safe".  So, essentially, I think this is trying to stop exactly what you are trying to do.  : )

    But if you do find a solution, I'm keen to hear about it!
    Post edited by thaen on

    Obsidian Portal Developer

  • NimrodYanai
    NimrodYanai
    Posts: 69

    Yeah, that sounds about right unfortunately.

    I can't add headers to the request via CSS, only via php/js/etc, 

  • NimrodYanai
    NimrodYanai
    Posts: 69

    So... are you going to add the ability to load custom font files?

  • thaen
    thaen
    Posts: 656

    Did you find something that said how we could do that and keep fonts containing malware from being labeled as "safe"?

    Obsidian Portal Developer

  • NimrodYanai
    NimrodYanai
    Posts: 69

    I'm not even sure how font files can contain malware, but would they be subjected to the same scans any regular file gets when being uploaded?

    At least, I hope they are being scanned...

  • NimrodYanai
    NimrodYanai
    Posts: 69

    I mean, I uploaded font files to the media folder already, I assume they were scanned, right?

  • thaen
    thaen
    Posts: 656

    Currently, there's no scanning done on the OP side on any of the uploads to the Media Library.  I suppose there could be a security hole there, but it's been that way for a while, so in some sense it has stood the test of time.

    Here though, we're talking about changing something to be "trusted" that previously has not been, so it makes me nervous.  For other files that are uploaded, the browser's CORS policy is not flagging those files.  So, I'm wary of telling the browser to trust the font files from the other server, when I don't actually know if that's a good idea or not, and it seems from the existence of the CORS policy that it might not be a good idea.

    I don't know if this is the same scenario as a font used in a website, but here's an example of a font containing malicious code:

    https://www.extremetech.com/internet/308167-windows-zero-day-attack-lets-hackers-hide-malicious-code-in-fonts

    So, I just don't know enough to go forward with trusting font files at this point.

    But OP does have the Google Fonts and the TypeKit ID fonts available for use ... which I think is a total of roughly 3000+ font families to choose from.

    You might take a look at Pirata One as a substitute for the Sherwood font you're wanting to use.  Other "Blackletter" fonts might be good substitutes too for the look you're going for.

    https://fonts.google.com/specimen/Pirata+One

     

     

    Obsidian Portal Developer

  • NimrodYanai
    NimrodYanai
    Posts: 69

    That is odd.



    I don't know enough about security, but using the font on mobile works fine, so I have no idea what the security issues might be.

    Anyway, it's far from urgent I suppose.

Sign In or Register to comment.

Campaign of the Month
September 2021

D&D 3.0: Tales from Mystara


Read the feature post on the blog!
Or return to Obsidian Portal!

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions