Adding fonts through FTP

Kristin Skelton

Hey guys!


I dowloaded a web font from MyFonts.com and added it to our ftp folder. I then added the path to it in our Page Wrapper. Everything works perfectly when I am previewing the pages on the backend of Luminate. If I try to publish the TeamRaiser event though and view the published site I get the following error:

Font from origin 'https://secure2.convio.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://support.ddfl.org' is therefore not allowed access.


Does anyone know how I fix this? I appreciate your help!!  


Kristin

Brian Mucha

Wow, I never knew that fonts are subject to Cross-Domain policy.

"For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though they do work (incorrectly so) in Webkit-based browsers."


Use the same domain name to connect to your external font assets as the page they are being served on.


You are using both https://secure2.convio.net and http://support.ddfl.org. Those are not the same domain, so your browser doesn't consider that resource trusted.


This is to keep you from connecting to a file on http://someshadydomain.ru. (It seems like a good idea because of the great fonts they offer, until they stop serving you a font and start injecting something malicious.)


To make it easy you can use the [[S29:DOMAIN]] or [[S29:SECURE_DOMAIN]] tag, or just use relative paths to your fonts.


Ours looks like this:

@font-face 
{
	font-family: 'Gesta-Regular';
	src: url('../fonts/Gesta-Regular.eot');
	src: url('../fonts/Gesta-Regular.eot?#iefix') format('embedded-opentype'),url('../fonts/Gesta-Regular.woff') format('woff'),url('../fonts/Gesta-Regular.ttf') format('truetype'),url('../fonts/Gesta-Regular.svg#wf') format('svg');
}