CODEWITHSUNDEEP
htmlcss.htaccessfonts
Patrick R
Patrick R

Reputation: 1979

Cross-domain font problems

Sorry for the long post, but you need some background info before my question since this is a strange setup and it's quite complex.

I have two fonts that's needs to be in a newletter.

First font, Cyclone, is in a format OTF.

The second, Albert, is format EOT and WOFF.

We have a system that send the newsletters for us, i only need to upload a html file to that system, that contains the structure, images and newsletter content, and upload images that needs to be in the newsletter.

After that i can preview it by sending it to my self.

  1. First, i can't upload fonts or anything else to the newsletter system besides images and html.
  2. Second, i have uploaded both fonts, and the css to our webiste's media folder(public folder) where we also load images to the website.
  3. Third, i or anyone else, have no access to the .htaccess file, and we will never get it, since the site is hosted somewhere, and to get that fixed for cross-domain for newsletters is to big of a task for such a small job.

In the newsletter i am loading the font like this:

@import url(xxx.com/media/fonts/albert.css);

and the CSS looks like this:

@font-face {
font-family: Albert;
src: url("fsalbertwebregular.woff") format("woff");
}

have also tried this setup in the css:

@font-face {
font-family: 'Albert';
src: url('FSAlbertWeb-Regular.eot'); /* IE9 */
src: url('FSAlbertWeb-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('FSAlbertWeb-Regular.woff') format('woff'); /* Modern Browsers */
font-weight: normal;
font-style: normal;
}

And then use the font on the body:

body{
    font-family: 'Albert', times new roman;
}

But doing this, i am getting this error/warning:

CORS-headeren 'Access-Control-Allow-Origin'

The funny thing is, when i used the Cyclone.otf font, it worked fine. When i use the albert.eot or albert.woff, it's not working. I then tried to convert the woff to otf, and use that, didn't work - same error/warning.

The setup might sounds strange, and is sure is, i have tried to draw how the setup is, so hope it makes a bit more sense.

enter image description here

Can anyone help me with this, what needs to be done without editing the .htaccess file. And why does Cyclone.otf work and not the others, even after converting them to otf?

Upvotes: 2

Views: 325

Answers (1)

Andrew
Andrew

Reputation: 1880

Special fonts wont work in emails. You have to still use the basic web fonts like arial.

If it worked for you on one machine it may mean that you have that font installed. Try testing it on another machine and see what results you get. Also it can be worth testing your email code through a system like email on acid to see how it reacts and breaks to different email systems such as gmail or outlook.

Here is a guide to email fonts: http://templates.mailchimp.com/design/typography/

Upvotes: 1

Related Questions