eddieace's avatar

Changing font to google font in email template

I'v been trying to change the font in my mailables and notifications theme. But with no success.

I'v tried to implement in the defualt.css file in Resources/views/vendor/mail/html/themes/default.css

/* Base */
@import url('https://fonts.googleapis.com/css?family=Heebo&display=swap');

body, body *:not(html):not(style):not(br):not(tr):not(code) {
    font-family: 'Heebo', cursive;
    box-sizing: border-box;
}

Anyone know if it's even possible?

0 likes
11 replies
sirhxalot's avatar

In your case you must add the font-family to the elements you cannot use the body for global font assignement. Working with emails can sometimes be a pain - If you are interested I am using Inky: https://get.foundation/emails/docs/

It helps alot.

1 like
eddieace's avatar

Actually this code inlines the font-family to all elements. I think my issue more has something todo with the way I'm importing the font itself.

body, body *:not(html):not(style):not(br):not(tr):not(code) {
    font-family: Avenir, Helvetica, sans-serif;
    box-sizing: border-box;
}
sirhxalot's avatar

@eddieace Please give it at least a try.

<p style="font-family: Avenir">Should be formated</p>

I am sure that your CSS rule will not be supported by email clients.

eddieace's avatar

Yeah, with Avenir but not with the font google font that I try to import

sirhxalot's avatar
Level 9
<link href="https://fonts.googleapis.com/css?family=Heebo&display=swap" rel="stylesheet"> 
<p style="font-family: Heebo">Should be formated</p>

Does this work?

3 likes

Please or to participate in this conversation.