How to use custom fonts in email template?

I am trying to implement the custom fonts using link tag shown below in photo.

21 Replies

@Team Sorry for tagging but I am running behind on the deadline, if possible then please help me out with this.

stojan•4y ago

hey! I'll take a look now hey so if I'm understanding correctly, you're trying to use web fonts in an email template sent out by Supabase Auth, correct?

Swapnil SrivastavaOP•4y ago

Yes Using Supabase Auth magic link

stojan•4y ago

generally email clients don't support all HTML features, so you should be prepared that web fonts are not going to work. there's more information on this topic here: https://www.campaignmonitor.com/resources/guides/web-fonts-in-email/

Campaign Monitor

Everything You Need to Know About Web Fonts in Email

Trying to figure out how to use typography in html email? We'll provide actionable advice about how to choose the ideal web font in email. Read more now!

stojan•4y ago

unfortunately we as Supabase can't do much to fix this

garyaustin•4y ago

You should be able to look at the source code in your email client and see if the html style tags flow thru from Supabase (They do for me). Then it is a matter if they work in general or in that email client.

garyaustin•4y ago

That was with the <link href="https://fonts.googleapis.com/css?family=Aberto" rel="stylesheet" type="text/css"> Your import way did not work for me. Problem is though it prompts the user about remote content (like for images) if they have that feature.

Swapnil SrivastavaOP•4y ago

I used the link which you shared but it didn't worked.

Swapnil SrivastavaOP•4y ago

Can you share the screenshot of your email template to get a more insight what to use.?

garyaustin•4y ago

<link href="https://fonts.googleapis.com/css?family=Aboreto" rel="stylesheet" type="text/css">
<style type="text/css">
  body {
    font-family: 'Aboreto', serif;
  }
</style>

<body>
<h2>Reset Password</h2>
{{.SiteURL}}
{{.Email}}
{{.Data.name}}
<p>Follow this link to reset the password for your user:</p>
<p><a href="{{ .ConfirmationURL }}">Reset Password</a></p>
<a href = "exampleapp://reset-password" deeplink="true">Reset</a>
</body>

<link href="https://fonts.googleapis.com/css?family=Aboreto" rel="stylesheet" type="text/css">
<style type="text/css">
  body {
    font-family: 'Aboreto', serif;
  }
</style>

<body>
<h2>Reset Password</h2>
{{.SiteURL}}
{{.Email}}
{{.Data.name}}
<p>Follow this link to reset the password for your user:</p>
<p><a href="{{ .ConfirmationURL }}">Reset Password</a></p>
<a href = "exampleapp://reset-password" deeplink="true">Reset</a>
</body>

Swapnil SrivastavaOP•4y ago

I am editing in Supabase auth dashboard only, or I have to make changes anywhere else also ?

garyaustin•4y ago

That is what I put in my template in the dashboard. It is just a test site, so the actual template code has lots of test stuff in it.

Swapnil SrivastavaOP•4y ago

I have used the same code which you sent but still not working. Can you let me know what mistake I am making?

garyaustin•4y ago

Do you know you are making a mistake? I'm using Thunderbird as my email client. It may not work for all clients.

Swapnil SrivastavaOP•4y ago

How may I know will it work for my client or not? I am using Postmark

garyaustin•4y ago

This is beyond anything I've messed with and not really SB related. I'm sure google has more info. Basically if you can see your style stuff in the source code of the email then SB is successfully passing it thru. I just looked at my test email in an iphone email client and the font shows up fine there too. Google gmail web client does not, but gmail is very limited in what it will display.

Swapnil SrivastavaOP•4y ago

Ok , thank you for clearing out this. 😀

Olyno•4y ago

Hey :vmathi: I understand that you need help quickly because of a deadline, but please don't mention the team. The help is voluntary, and in no way an official support. @Swapnil Srivastava

Swapnil SrivastavaOP•4y ago

Ok 👍🏻 How to get official support ?

Olyno•4y ago

By creating a support ticket here: https://app.supabase.io/support/new

Gaming

Programming

How to use custom fonts in email template?

Did you find this page helpful?