Changing default font type on all emails the system sends

Hi!

I am trying to modify the invites email a new user will receive whe we send him and invitation. I am trying to meet the design needs of our company(fonts, colors,…) The fonts we need are in Google fonts site and i try to modify the HTML Template in which all html emails are rendered trying to add two font types i need to use…

<head>
  <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:700|Source+Sans+Pro:300&amp;display=swap" rel="stylesheet" type='text/css'>
</head>

…then in the body of template i add:

<style type="text/css">    
 body, p {font-family: 'Source Sans Pro', sans-serif;}
</style>
<!--[endif]-->

%{email_content}

…but when i receive test invite emails to a temporary address i’ve setup to test if this is working or not…the only font wich is loaded is the fallback font wich is “sans-serif”. The font i need is not downloaded or parsed.

So how can i customize invite email using fonts from Google fonts…??

And second part of my request is how can i add for example an outlined div or paragraph to only one email template(invite email template) because BBCodes doesn’t allow to customize a lot.

Thanks in advance!!

1 Like

Your markup looks correct. What email client are you testing this on? Not all email clients support the use of web fonts. I don’t think Gmail supports web fonts.

Try adding a div with the class you are wanting to style directly to the invite template and then adding styles to the class to the Email Style / CSS editor. Discourse will substitute the styles you add there directly into the div that you target with a class. For example, with the Invite Mailer template customized to:

<div class="invite">
%{inviter_name} invited you to a discussion

> **%{topic_title}**
>
> %{topic_excerpt}

at

> %{site_title} -- %{site_description}

If you're interested, click the link below:

%{invite_link}
</div>

and the following added to Email Styles / CSS

.invite {
    border: 1px solid red;
}

Invites have a red border around the content.

3 Likes

Thanks i will try and will let you know…I am using GMX services to test invite emails… maybe is what you are saying…i will test with other email client.

1 Like

then is it possible to change the font of emails for Gmail at all? so far I couldn’t add Persian fonts to our emails. is there any way?

I am going to be doing some email testing this week. I’ll see if I can figure out how to get this to work. If anyone knows how to add custom fonts so that they work on Gmail, please let me know.

2 Likes

Did you try searching in Google for an answer?

I get your point. I tried finding a way (googling) to change the font of a digest email, both in google and in meta.

that’s why I haven’t created a new topic and answered at the end of a googled topic! :wink:

I didn’t try to see if gmail allows different fonts, since I have seen emails at my gmail inbox, from other websites, where they use Persian fonts.

2 Likes