Help me with calling a custom font | Community
Skip to main content
A
Anonymous
January 8, 2019
Solved

Help me with calling a custom font

  • January 8, 2019
  • 1 reply
  • 4482 views

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('www....[actual font URL here]....AvenirNext-Regular.ttf') format("truetype"),

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

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

     }

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

</style>

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Casey_Grimes2

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.

1 reply

SanfordWhiteman
SanfordWhiteman
New Participant
January 8, 2019

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

A
Anonymous
January 8, 2019

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('tradingtechnologies.com/wp-content/themes/tt/assets/fonts/AvenirNext-Regular.ttf') format("truetype"),

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

url('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>

Casey_Grimes2
Casey_Grimes2Accepted solution
New Participant
January 8, 2019

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.

    Terms & ConditionsAccessibility statement

    Loading footer...