Skip to main content
timcavey
timcavey
Helper ⭐️⭐️
Jul 21, 2023 4:02 PM UTC
Solved

Custom fonts in system emails?

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?

    lauro.lana
    lauro.lanaAnswer
    Helper ⭐️⭐️⭐️
    Jul 22, 2023 2:03 AM UTC

    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! 😊

    View in thread

    3 replies

    lauro.lana
    lauro.lanaAnswer
    Helper ⭐️⭐️⭐️
    Jul 22, 2023 2:03 AM UTC

    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! 😊

    Translate
      timcavey
      timcaveyAuthor
      Helper ⭐️⭐️
      Nov 15, 2023 1:42 PM UTC

      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 

      Translate
      learning, sharing and repeat
      lauro.lana
      lauro.lana
      Helper ⭐️⭐️⭐️
      Jan 16, 2024 4:26 PM UTC

      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 
       

       

      Translate
        Terms & ConditionsAccessibility statement