6

I just need to add Lucida Grande font in my email template. I have already added into _typography.less,_variables.less.

and its also showing in email-fonts.css. but it will not working in email template

is there any other way to apply this font in email. please share if any idea.

I have use Luma theme, also _variables.less file, 

@font-family-name__base: 'Open Sans';
@font-family-name__lucida: 'Lucida Grande';
@font-family-name__lato: 'Lato';
@font-family__base: @font-family-name__lucida, @font-family-name__lato, @font-family-name__base, @font-family__sans-serif;

in _typography.less file i edit 

.lib-font-face(
        @family-name: @font-family-name__lucida,
        @font-path: '@{baseDir}fonts/Lucida-Grande',
        @font-weight: 400,
        @font-style: normal
    );

Font family file path locate : 

app/design/frontend/Vendor/theme/web/fonts/
Improve this question
1

4 Answers 4

Reset to default
1

You normally have an Magento_Email/email/header.html in your theme that you are using.

Just add (in the <head></head> tag ):

<style type="text/css">
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}
</style>

Different Lucida css styles : https://www.cssfontstack.com/Lucida-Grande

This will apply to the whole body.

the header.html and the footer.html are pasted before and after every mail that you send so it comes in handy to use those to add general css styles instead of creating inline css styles.

You can also add css files to it (in the header.html) for example :

-->
<!--@subject {{trans "Header"}} @-->
<!--@vars {
"var logo_height":"Email Logo Image Height",
"var logo_width":"Email Logo Image Width",
"var template_styles|raw":"Template CSS"
} @-->
<html>
    <head>
        <style type="text/css">
            {{var template_styles|raw}}
            {{css file="css/email.css"}}
        </style>
// and responsive 
        <style media="only screen and (max-width:600px)" type="text/css">
            table[class~="container"] {
                width: 100% !important;
            }
        </style>
....

Then just add email.less to your frontend/vendor/theme/web/css folder and add css there.

In that less file you can add other less files or fonts with something like this

//  Font stylesheet @import is wrapped in a media query in order to prevent it from causing problems in Outlook
@media screen {
    @import 'source/_typography.less';
}

So its all a matter how you want to do it. You can import a compiled css within your html file and the less version of that you can import other less files and fonts like how you would normally.

Hope this helps.

Improve this answer
0

You'll want to go into the templates from the admin area: Marketing --> Email Templates

... and then you'll want to edit a template using inline CSS formatting.

HTML for email is a whole different animal. Due to security restrictions, you usually cannot load external stylesheets, so everything needs to be done in-line.

Here's a quick code example:

<p><span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000;"><strong>Thanks for your recentl order from our store.  We are thrilled to be shipping it out to you today.</strong></span></p>
Improve this answer
2
  • i need to load this font for whole email body. so how can i do that
    – Dhaval Vaghela
    Jan 16, 2018 at 7:27
  • and i use Lucida Grande font, so we need to add this font in /fonts directory
    – Dhaval Vaghela
    Jan 16, 2018 at 7:28
0

Apply font location with full url in your email template

<style type="text/css">
@media screen {
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
  }

  ...

  body {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
  }
</style>
Improve this answer
0

In:

/app/design/frontend/{vendor}/{theme}/web/css/source/_variables.less

Change:

@font-family-name__base: 'Lucida Grande';
@font-family__base: @font-family-name__base;

If you don't have this file in your theme, copy it from the parent theme (Magento_Blank).

This will most probably change the font in your entire Magento application and emails.

If you don't want to change the font for your shop or if the font isn't changed in the emails after your change, check this file:

/app/design/frontend/{vendor}/{theme}/web/css/source/_email-base.less

(again copy it from the parent theme if you don't have it in your theme)

Search for "font-family" and change all instances to 'Lucida Grande' or if you use the same font throughout your shop, change it to @font-family__base.

Also make sure the email template you are sending has the header template included. You can add it with {{template config_path="design/email/header_template"}} at the top of your email.

EDIT

You should stick to Magento's default way of implementing font & styles to emails, because different email clients have different ways of "reading" the styles. For example Gmail reads only the inline styles, while Outlook reads the non-inline styles.

So if you only use one way, many email clients won't receive the emails correctly.

Not to go into details, because email styling is a broad topic, Magento has the basics covered so if you're using Magento Blank as your parent theme, or the same "email style import logic" as Magento Blank, this is the way to go.

EDIT 2

If you are using Luma theme, and you are extending it. Just copy /vendor/magento/theme-frontend-blank/web/css/source/_email-base.less to /app/design/{vendor}/{theme}/web/css/source/_email-base.less.

Luma isn't intended for extending, because it depends on Magento_Blank being the parent. And by extending it, you effectively removed the Blank theme as the parent and all of the stuff Luma depends on.

Improve this answer
8
  • this all depends which theme you are using and what less files they use.
    – CompactCode
    Jan 16, 2018 at 13:07
  • That is correct. But since he didn't specify details in the question, I based my answer on Magento defaults.
    – Lez
    Jan 16, 2018 at 13:28
  • Thats why i explained how you integrate less filles in your own email template. Its compatible with default magento themes and also with themes where the parent is not Magento based
    – CompactCode
    Jan 16, 2018 at 13:36
  • @Lez I have used Luma theme , and that have not _email-base.less file in theme
    – Dhaval Vaghela
    Jan 19, 2018 at 10:18
  • Font style showing in Email template preview but not showing into real email body content
    – Dhaval Vaghela
    Jan 19, 2018 at 10:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.