Email Template Font and Creating Templates

Questions
1

Hi, I am trying to modify the email templates to fit the branding of my ogranization.

The font family that must be used is Work Sans, however, Okta doesnt seem to be able to recognize this.
This is the inline css that I am trying to implement:

image
image797Ă—90 12.7 KB

This is the result, it seems to be defaulting to another font:
image

This is the expected result:

image
image1164Ă—402 11 KB

Also, is there a way to create an email template ?

2

Hi @amirhossein_sharghi looks like you’ll need to add the Google font (Google Fonts: Work Sans) in the head tag; you’ll want add this at the top of your Forgot Password email template code. The following html code worked for me and just to note: 1) you’ll need to send a test email to see the changes, 2) adjust the sizing for each div (my code is only an example the font works).

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="none" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@500&display=swap" rel="stylesheet">
  
</head>

<style>
    .div {
       font-family: 'Work Sans', sans-serif;
    }
</style>

<div style="background-color:#fafafa;margin:0"> 
  <table style="font-size:30px;color:#5e5e5e;width:98%;max-width:1000px;float:none;margin:0 auto" border="0" cellpadding="0" cellspacing="0" valign="top" align="left">
    <tbody>
      <tr align="middle">
        <td style="padding-top:30px;padding-bottom:32px"><img src="${oktaLogoUrl}" height="37" /></td>
      </tr>
      <tr bgcolor="#ffffff">
        <td> 
          <table bgcolor="#ffffff" style="width:100%;line-height:20px;padding:32px;border:1px solid;border-color:#f0f0f0" cellpadding="0">
            <tbody>
              <tr>
                <td style="color:#5e5e5e;font-size:22px;line-height:22px"> ${org.name} - Okta Password Reset Requested </td>
              </tr>
              <tr>
                <td style="padding-top:24px;vertical-align:bottom"> Hi ${f.escapeHtml($!user.profile.firstName)}, </td>
              </tr>
              <tr>
                <td style="padding-top:24px"> A password reset request was made for your Okta account. If you did not make this request, please contact your system administrator immediately. </td>
              </tr>
              <tr>
                <td style="padding-top:24px"> Click this link to reset the password for your username, ${user.profile.login}: </td>
              </tr>
              <tr>
                <td align="center"> 
                  <table border="0" cellpadding="0" cellspacing="0" valign="top">
                    <tbody>
                      <tr>
                        <td align="center" style="height:32px;padding-top:24px;padding-bottom:8px"> <a id="reset-password-link" href="${resetPasswordLink}" style="text-decoration:none"><span style="padding:9px 32px 7px 31px;border:1px solid;text-align:center;cursor:pointer;color:#fff;border-radius:3px;background-color:#44bc98;border-color:#328c71 #328c71 #2f856b;box-shadow:0 1px 0 #d8d8d8">Reset Password</span></a> </td>
                      </tr>
                      <tr>
                        <td align="center" style="color:#999"> This link expires in ${f.formatTimeDiffDateNowInUserLocale($!resetPasswordTokenExpirationDate)}. </td>
                      </tr>
                    </tbody>
                  </table> </td>
              </tr>
              <tr>
                <td style="padding-top:24px"> If you experience difficulties accessing your account, send a help request to your administrator: </td>
              </tr>
              <tr>
                <td style="padding-top:24px"> Go to your <a href="${baseURL}/help/login" style="color:#007dc1;text-decoration:none"><span style="color:#007dc1;text-decoration:none">Sign-in Help</span></a> page. Then click the Request help link. </td>
              </tr>
            </tbody>
          </table> </td>
      </tr>
      <tr>
        <td style="font-size:12px;padding:16px 0 30px 50px;color:#999"> This is an automatically generated message from <a href="http://www.okta.com" style="color:rgb( 97 , 97 , 97 )">Okta</a>. Replies are not monitored or answered. </td>
      </tr>
    </tbody>
  </table> 
</div>
<div style="display:none">${resetPasswordLink}</div>
1 Like
3

Also here are the HTML tags you can customize - Customize email notifications | Okta Developer.

4

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.