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!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
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
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
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:
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
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.
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?
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!Obsidian Portal Developer
Yeah, that sounds about right unfortunately.
I can't add headers to the request via CSS, only via php/js/etc,
So... are you going to add the ability to load custom font files?
Did you find something that said how we could do that and keep fonts containing malware from being labeled as "safe"?
Obsidian Portal Developer
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...
I mean, I uploaded font files to the media folder already, I assume they were scanned, right?
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
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.