Magento – Magento 2: I just need to add custom font in email template

magento2

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/

Best Answer

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.

Related Topic