Search code examples
htmlcssemailhtml-email

CSS: How to customize fonts in an email?

I'm trying to set a customized font to an email. In the HTML of the email I have added the fonts with this code:

    <head>
    <style>
        /* latin-ext */
        @font-face {
        font-family: 'BVP';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/bevietnampro/v10/QdVPSTAyLFyeg_IDWvOJmVES_Hw5BXoKZA.woff2) format('woff2');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
        }
        /* latin */
        @font-face {
        font-family: 'BVP';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/bevietnampro/v10/QdVPSTAyLFyeg_IDWvOJmVES_Hw3BXo.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }
        /* latin-ext */
        @font-face {
        font-family: 'BVP';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/bevietnampro/v10/QdVMSTAyLFyeg_IDWvOJmVES_HSMIG87Rb0bcw.woff2) format('woff2');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
        }
        /* latin */
        @font-face {
        font-family: 'BVP';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/bevietnampro/v10/QdVMSTAyLFyeg_IDWvOJmVES_HSMIG81Rb0.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }
    </style>
</head>

And when I try to apply a font style to my code I have done it inline like you can see here:

<h1 style = "font-family: BVP, sans-serif !important; font-style: normal; font-weight: 700; color: #DBAFB4; margin: 0 auto">Congratulations!!!</h1>

But the style it's not applied to the HTML because there is an style by default which I don't know how to remove despite of the application of "!important" to my style definition.

If I inspect my code in the console, we can see the custom font style applied:

enter image description here

Inspecting our code we can see this style applied by default whicb avoid to apply the font style defined in the HTML:

enter image description here

If we check the text where is applied this style default, we can see this:

enter image description here

But If we remove this styles from the console:

enter image description here

And we can see how the font style is applied:

enter image description here

How is that possible? How can I remove this style by default or apply correctly the font-styles to the HTML email?

Solution

  • Gmail supports only Google Sans and Roboto fonts (and you don't have to load them in unless you want other email clients to use it).

    Only some email clients support any web font, namely, Apple Mail and a couple of others: https://www.caniemail.com/features/css-at-font-face/

    Don't use !important inline, that may strip the entire style out in some email clients.

    Otherwise, what you've done is good (apart from wanting to remove the a3s class). It just doesn't work with Gmail, and in which case I would expand your font-stack to, e.g. font-family: BVP, Roboto, Arial, sans-serif;

    Another tip: you can normally remove the /* latin-ext */ section, and not load that font, unless you are using the extended character set (accents and weird stuff).

    If you want further help, share your full code.