Custom Fonts in Email

0 Votes

Sarah Daily June 24, 2019 18:18

Has anyone had any luck using custom fonts with Act-On? I tried to follow this guide: The Ultimate Guide to Web Fonts in Email-Litmus Software, Inc. But I'm not having any luck using the <link> call out vs. @import.

When I placed my code in the header of one of my templates, it auto nested my code in <p> tags:

<p><link href='https://enrollment.org/templates/rt_ricochet/fonts/MuseoSans_300-webfont.woff' rel='stylesheet' type='text/css' /></p>

------------------------------
Sarah Daily
Digital Marketing Manager, The Enrollment Management Association
------------------------------

Comments

3 comments

Sarah Daily June 28, 2019 19:40

Just tried this using <style> and it worked at first but Act-On comments out the code after I save it:

<style><!--
@font-face {
 font-family: 'museo_sans300';
 src: url('https://enrollment.org/templates/rt_ricochet/fonts/MuseoSans_300-webfont.eot');
 src: url('https://enrollment.org/templates/rt_ricochet/fonts/MuseoSans_300-webfont.eot?#iefix') format('embedded-opentype'),
 url('https://enrollment.org/templates/rt_ricochet/fonts/MuseoSans_300-webfont.woff2') format('woff2'),
 url('https://enrollment.org/templates/rt_ricochet/fonts/MuseoSans_300-webfont.woff') format('woff'),
 url('https://enrollment.org/templates/rt_ricochet/fonts/MuseoSans_300-webfont.ttf') format('truetype'),
 url('https://enrollment.org/templates/rt_ricochet/fonts/MuseoSans_300-webfont.svg#museo_sans300') format('svg');
 font-weight: normal;
 font-style: normal;
 }
 @font-face {
 font-family: 'museo_slab';
 src: url('https://enrollment.org/templates/rt_ricochet/fonts/Museo_Slab_300-webfont.eot');
 src: url('https://enrollment.org/templates/rt_ricochet/fonts/Museo_Slab_300-webfont.eot?#iefix') format('embedded-opentype'),
 url('https://enrollment.org/templates/rt_ricochet/fonts/Museo_Slab_300-webfont.woff2') format('woff2'),
 url('https://enrollment.org/templates/rt_ricochet/fonts/Museo_Slab_300-webfont.woff') format('woff'),
 url('https://enrollment.org/templates/rt_ricochet/fonts/Museo_Slab_300-webfont.ttf') format('truetype'),
 url('https://enrollment.org/templates/rt_ricochet/fonts/Museo_Slab_300-webfont.svg#museo_slab300') format('svg');
 font-weight: normal;
 font-style: normal;
--></style>

------------------------------
Sarah Daily
Digital Marketing Manager, The Enrollment Management Association
------------------------------
-------------------------------------------
Original Message:
Sent: 03-22-2018 11:01
From: Sarah Daily
Subject: Custom Fonts in Email

Has anyone had any luck using custom fonts with Act-On? I tried to follow this guide: The Ultimate Guide to Web Fonts in Email-Litmus Software, Inc. But I'm not having any luck using the <link> call out vs. @import.

When I placed my code in the header of one of my templates, it auto nested my code in <p> tags:

<p><link href='https://enrollment.org/templates/rt_ricochet/fonts/MuseoSans_300-webfont.woff' rel='stylesheet' type='text/css' /></p>

------------------------------
Sarah Daily
Digital Marketing Manager, The Enrollment Management Association
------------------------------

Sarah Daily June 28, 2019 19:40

Even though it commented out, it seemed to work in the editor:

But didn't work on the test send:

<style><!--
@font-face {
 font-family: 'museo_sans300';
 src: url('https://enrollment.org/templates/rt_ricochet/fonts/MuseoSans_300-webfont.eot');
 src: url('https://enrollment.org/templates/rt_ricochet/fonts/MuseoSans_300-webfont.eot?#iefix') format('embedded-opentype'),
 url('https://enrollment.org/templates/rt_ricochet/fonts/MuseoSans_300-webfont.woff2') format('woff2'),
 url('https://enrollment.org/templates/rt_ricochet/fonts/MuseoSans_300-webfont.woff') format('woff'),
 url('https://enrollment.org/templates/rt_ricochet/fonts/MuseoSans_300-webfont.ttf') format('truetype'),
 url('https://enrollment.org/templates/rt_ricochet/fonts/MuseoSans_300-webfont.svg#museo_sans300') format('svg');
 font-weight: normal;
 font-style: normal;
 }
 @font-face {
 font-family: 'museo_slab';
 src: url('https://enrollment.org/templates/rt_ricochet/fonts/Museo_Slab_300-webfont.eot');
 src: url('https://enrollment.org/templates/rt_ricochet/fonts/Museo_Slab_300-webfont.eot?#iefix') format('embedded-opentype'),
 url('https://enrollment.org/templates/rt_ricochet/fonts/Museo_Slab_300-webfont.woff2') format('woff2'),
 url('https://enrollment.org/templates/rt_ricochet/fonts/Museo_Slab_300-webfont.woff') format('woff'),
 url('https://enrollment.org/templates/rt_ricochet/fonts/Museo_Slab_300-webfont.ttf') format('truetype'),
 url('https://enrollment.org/templates/rt_ricochet/fonts/Museo_Slab_300-webfont.svg#museo_slab300') format('svg');
 font-weight: normal;
 font-style: normal;
--></style>

------------------------------
Sarah Daily
Digital Marketing Manager, The Enrollment Management Association
------------------------------

Original Message:
Sent: 03-22-2018 11:01
From: Sarah Daily
Subject: Custom Fonts in Email

Has anyone had any luck using custom fonts with Act-On? I tried to follow this guide: The Ultimate Guide to Web Fonts in Email-Litmus Software, Inc. But I'm not having any luck using the <link> call out vs. @import.

When I placed my code in the header of one of my templates, it auto nested my code in <p> tags:

<p><link href='https://enrollment.org/templates/rt_ricochet/fonts/MuseoSans_300-webfont.woff' rel='stylesheet' type='text/css' /></p>

------------------------------
Sarah Daily
Digital Marketing Manager, The Enrollment Management Association
------------------------------

Sara Theurer August 28, 2019 19:04

Following, as I've also had a lot of trouble getting google fonts to work in an email. I really wish we could just access the <head> of our emails, I don't want to mess around with figuring out Stationary.

If I come across a solution to this in my current troubleshooting, I'll post the solution here.

Please sign in to leave a comment.

Comments

Connect with us