Skip to main content
timcavey
timcavey
Helper ⭐️⭐️
July 21, 2023
Solved

Custom fonts in system emails?

  • July 21, 2023
  • 3 replies
  • 258 views

We’ve loaded a font-face script to define a custom font name and address, and we’re using that in our front end font selector. It work’s a treat. 

 

How can we use that custom font in system emails?

    Best answer by lauro.lana

    Hey @timcavey,

    The custom fonts added in the front end will not be picked up in system emails

    You’ll need to add your custom font by adding it to the HTML code:

    <html>
       <head>
        <style>
    @font-face {
        font-family: 'TimCavey'; 
        src: url('TheURLToTheFontFile'); /*URL to font*/
        }
        </style>
       </head>
       <body>
          <h1>Hi, Tim!</h1>
       </body>
    </html>

    Let me know if you run into any issues with this! 😊

    3 replies

    lauro.lana
    lauro.lanaAnswer
    Helper ⭐️⭐️⭐️
    July 22, 2023

    Hey @timcavey,

    The custom fonts added in the front end will not be picked up in system emails

    You’ll need to add your custom font by adding it to the HTML code:

    <html>
       <head>
        <style>
    @font-face {
        font-family: 'TimCavey'; 
        src: url('TheURLToTheFontFile'); /*URL to font*/
        }
        </style>
       </head>
       <body>
          <h1>Hi, Tim!</h1>
       </body>
    </html>

    Let me know if you run into any issues with this! 😊

      timcavey
      timcaveyAuthor
      Helper ⭐️⭐️
      November 15, 2023

      I’m bringing this topic back from the end after learning that:

      “most email clients and email providers will strip emails of css and only support a handful of system fonts as inline styles. You also tend to be limited in terms of the kinds of inline styling you can use - for example css flex and css grid are often no goes, and you have to resort to old fashioned table layouts.”

       

      Our system emails are full of <table> elements so that makes sense. 

       

      Having tried to add the font-face styles in the head and seeing that the test email uses the fall back fonts, it seems to be correct.  

       

      Can someone from Gainsight confirm this? Is there are libraries or anything we can do to have pretty on-brand system emails? @leo-inspired 

      learning, sharing and repeat
      lauro.lana
      lauro.lana
      Helper ⭐️⭐️⭐️
      January 16, 2024

      Hey @timcavey,

      You can use any web fonts in the System Emails and they should work however, the styling might not work depending on the email client. Refer to this article: https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts 
       

       

        Terms & ConditionsAccessibility statement