Supabase•4y ago

How to use custom fonts in email template?

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

Swapnil SrivastavaOP•8/24/22, 3:27 PM

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

stojan•8/24/22, 3:31 PM

hey! I'll take a look now

stojan•8/24/22, 3:32 PM

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•8/24/22, 3:32 PM

Yes

Swapnil SrivastavaOP•8/24/22, 3:33 PM

Using Supabase Auth magic link

stojan•8/24/22, 3:56 PM

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•8/24/22, 3:56 PM

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

garyaustin•8/24/22, 4:09 PM

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•8/24/22, 4:28 PM

That was with the <link href="https://fonts.googleapis.com/css?family=Aberto" rel="stylesheet" type="text/css"><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.

Ggaryaustin That was with the `<link href="https://fonts.googleapis.com/css?family=Aberto" r...

Swapnil SrivastavaOP•8/24/22, 5:24 PM

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

Swapnil SrivastavaOP•8/24/22, 5:25 PM

Swapnil SrivastavaOP•8/24/22, 5:25 PM

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

garyaustin•8/24/22, 5:29 PM

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

Ggaryaustin ``` <link href="https://fonts.googleapis.com/css?family=Aboreto" rel="styleshee...

Swapnil SrivastavaOP•8/24/22, 5:31 PM

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

garyaustin•8/24/22, 5:32 PM

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.

Ggaryaustin That is what I put in my template in the dashboard. It is just a test site, so ...

Swapnil SrivastavaOP•8/24/22, 5:36 PM

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

garyaustin•8/24/22, 5:37 PM

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

Ggaryaustin Do you know you are making a mistake? I'm using Thunderbird as my email clien...

Swapnil SrivastavaOP•8/24/22, 5:38 PM

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

garyaustin•8/24/22, 5:49 PM

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.

garyaustin•8/24/22, 7:15 PM

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•8/25/22, 7:10 PM

Ok , thank you for clearing out this.

Olyno•8/25/22, 8:02 PM

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

OOlyno Hey :vmathi: I understand that you need help quickly because of a deadline, but ...

Swapnil SrivastavaOP•8/25/22, 8:47 PM

OOlyno Hey :vmathi: I understand that you need help quickly because of a deadline, but ...

Swapnil SrivastavaOP•8/25/22, 8:47 PM

How to get official support ?

SSwapnil Srivastava How to get official support ?

Olyno•8/25/22, 8:54 PM

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

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

How to use custom fonts in email template?

Similar Threads

Similar Threads

Similar Threads