Expand my Community achievements bar.

SOLVED

Getting custom fonts to render in email deliveries

Avatar

Level 1

Hello,

 

I am trying to utilize custom fonts within our email templates/deliveries. However, the custom font is not displaying properly within the ACC client inside the preview, as well as the actual email send.

 

I have the CSS within the email html within a <style> element inside the <head> section, and using the @Font-face rule. The src:url is referencing a public url.

example:

@Font-face {
font-family: 'myFont';
src: url('https://font_url_omitted.net/myFont.eot');
font-weight: normal;
font-style: normal;
mso-font-alt: 'Arial';
}

 

Are there known issues with doing this method for email deliveries? I also have the font files (eot, woff, woff2, ttf) themselves, but am unsure where and how to store them within the adobe server and/or client, and how to reference them within the delivery template.

 

Thanks in advance,

Kevin

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hello Kevin,

 

The only option is to enable CORS on the server where the fonts are hosted. If you don't have access to that server then i would suggest you to create an account on AWS for S3 or Digitalocean for Spaces. You can upload fonts there and enable cors for all the domains.

 

Upload fonts to adobe server won't help because you won't have access to enable CORS there.

Thanks,
Manoj


     Manoj
     Find me on LinkedIn

View solution in original post

11 Replies

Avatar

Community Advisor

Hi,

 

Did you enable CORS on the font's web server?

 

Thanks,

-Jon

Avatar

Level 1
I don't believe I have any control over that. However, when I follow the font's url it downloads the font file, so I don't believe its an access issue if that is what you mean.

Avatar

Community Advisor
Downloading font directly from url is same-origin, not cross-origin. Check here? https://www.test-cors.org/

Avatar

Level 1

It looks like CORS is not enabled, getting this response when pasting the URL into the Remote URL field

 

kevind46959602_0-1580330242825.png

@Jonathon_wodnicki I am on the same team as kevind. We have a hybrid solution with Adobe and their midsourcing servers are the ones sending the emails. Which server does CORS need to be enabled on exactly? The mid sourcing server or our internal app server? Thanks Connor

Just for a backup plan if we are unable to get CORS enabled, is storing the font type files into our Adobe Campaign server an option? If so how would we go about doing that and then referencing them in our delivery templates?

Avatar

Community Advisor
To host out of your app server you'd have to do paperwork for ip, dns, firewall, etc. Backup options can be IBM Cloud Storage, s3, any cheap vps.

Avatar

Correct answer by
Community Advisor

Hello Kevin,

 

The only option is to enable CORS on the server where the fonts are hosted. If you don't have access to that server then i would suggest you to create an account on AWS for S3 or Digitalocean for Spaces. You can upload fonts there and enable cors for all the domains.

 

Upload fonts to adobe server won't help because you won't have access to enable CORS there.

Thanks,
Manoj


     Manoj
     Find me on LinkedIn