Your Achievements
Level 1
0% to
Level 2
Next /
to gain points, level up, and earn exciting badges like the new Applaud 5 BadgeLearn more!
View All BadgesSign in to view all badges
Open Alert Bar
SOLVED

Help me with calling a custom font

Go to solution
Anonymous
Not applicable
‎01-07-2019 07:57 PM
‎01-07-2019 07:57 PM

Help me with calling a custom font

Hi,

So I'm familiar with the discussions on custom fonts and how to implement a custom font using the @font-face call.  I've attempted to implement a custom font, Avenr, in this manner.  Unfortunately I'm having no luck with having the custom font rendered.  Can someone please help me by glancing at my code to help me determine what I'm doing incorrectly?  I'm completely spinning my wheels on this one as the email consistently renders in Arial regardless of the hierarchy of the font-family order.  Thanks much!

<style type="text/css">

    @font-face {

     font-family: "Avenir Next Pro";

     src: url('https://www....[actual font URL here]....AvenirNext-Regular.ttf') format("truetype"),

        url('https://www....[actual font URL here]....AvenirNext-Regular.svg') format('svg'),

url('https://www....[actual font URL here]....AvenirNext-Regular.eot') format('eot');

     }

      body{font-family: 'Avenir Next Pro', Helvetica, Arial, Verdana, sans-serif;}

</style>

0 Likes
2,561
Reply
1 ACCEPTED SOLUTION

Accepted Solutions
Casey_Grimes
Level 10
Level 10
‎01-08-2019 12:07 PM
‎01-08-2019 12:07 PM

Re: Help me with calling a custom font

Quick note here (though it shouldn't matter in terms of what the core problem is in this case; need to see the actual page for that) that you really should use the following structure for your @font-face definition:

@font-face {
  font-family: 'Avenir Next Pro';
  src: url("https://www.tradingtechnologies.com/wp-content/themes/tt/assets/fonts/AvenirNext-Regular.eot");
  src: url("https://www.tradingtechnologies.com/wp-content/themes/tt/assets/fonts/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"), url("https://www.tradingtechnologies.com/wp-content/themes/tt/assets/fonts/AvenirNext-Regular.woff") format("woff"), url("https://www.tradingtechnologies.com/wp-content/themes/tt/assets/fonts/AvenirNext-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

EDIT: Actually caught the problem here--if you're calling a custom font for your emails, know that there's only partial support (@font-face | Campaign Monitor ) and you need to define Outlook-only fallbacks as to prevent having the program simply use serif.

View solution in original post

2,256
Reply
6 REPLIES 6
SanfordWhiteman
Level 10 - Community Moderator
Level 10 - Community Moderator
‎01-07-2019 08:11 PM
‎01-07-2019 08:11 PM

Re: Help me with calling a custom font

Please don't obfuscate your real URLs. Point to the page having this problem.

0 Likes
2,256
Reply
Anonymous
Not applicable
‎01-08-2019 11:52 AM
‎01-08-2019 11:52 AM

Re: Help me with calling a custom font

Hi Sanford, upon request, here are the full URLs, which shouldn't affect the surrounding code.

<style type="text/css">

    @font-face {

     font-family: "Avenir Next Pro";

     src: url('https://www.tradingtechnologies.com/wp-content/themes/tt/assets/fonts/AvenirNext-Regular.ttf') format("truetype"),

        url('https://www.tradingtechnologies.com/wp-content/themes/tt/assets/fonts/AvenirNext-Regular.svg') format('svg'),

url('https://www.tradingtechnologies.com/wp-content/themes/tt/assets/fonts/AvenirNext-Regular.eot') format('eot');

     }

      body{font-family: 'Avenir Next Pro', Helvetica, Arial, Verdana, sans-serif;}

</style>

0 Likes
2,256
Reply
Casey_Grimes
Level 10
Level 10
‎01-08-2019 12:07 PM
‎01-08-2019 12:07 PM

Re: Help me with calling a custom font

Quick note here (though it shouldn't matter in terms of what the core problem is in this case; need to see the actual page for that) that you really should use the following structure for your @font-face definition:

@font-face {
  font-family: 'Avenir Next Pro';
  src: url("https://www.tradingtechnologies.com/wp-content/themes/tt/assets/fonts/AvenirNext-Regular.eot");
  src: url("https://www.tradingtechnologies.com/wp-content/themes/tt/assets/fonts/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"), url("https://www.tradingtechnologies.com/wp-content/themes/tt/assets/fonts/AvenirNext-Regular.woff") format("woff"), url("https://www.tradingtechnologies.com/wp-content/themes/tt/assets/fonts/AvenirNext-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

EDIT: Actually caught the problem here--if you're calling a custom font for your emails, know that there's only partial support (@font-face | Campaign Monitor ) and you need to define Outlook-only fallbacks as to prevent having the program simply use serif.

2,257
Reply
SanfordWhiteman
Level 10 - Community Moderator
Level 10 - Community Moderator
‎01-08-2019 12:16 PM
‎01-08-2019 12:16 PM

Re: Help me with calling a custom font

Ah yes, "the email"...

0 Likes
2,256
Reply
Anonymous
Not applicable
‎01-08-2019 02:15 PM
‎01-08-2019 02:15 PM

Re: Help me with calling a custom font

You have been a great help.  Thank you!

0 Likes
2,256
Reply
Anonymous
Not applicable
‎01-09-2019 07:11 AM
‎01-09-2019 07:11 AM

Re: Help me with calling a custom font

As a follow up for those looking to implement custom fonts, I was able to eventually deliver our custom font successfully in the email.  The trick for me was defining the font-family style, not only at the top, but also specifically for each paragraph.  It is a laborious task for a text heavy email, but it works.

Here's what it looks like:

<body>

  <div id="FreeTextContent" class="mktoText" mktoname="FreeTextContent">

    <p><span style="font-family: 'avenir next pro',helvetica, arial, sans-serif;">This is the first paragraph.</span></p>

    <p><span style="font-family: 'avenir next pro',helvetica, arial, sans-serif;">This is the second paragraph.</span></p>

  </div>    

</body>                        

0 Likes
2,256
Reply
Home