cssemailfontswebfonts

Webfonts not working in mail loaded via stylesheet `link`

I replaced @font-face linking to fonts.gstatic.com with a "stylesheet" link tag linking to font-source-sans-pro-300.e7f3684c.css generated by Webpack Encore using Fontsource.

Working: Using @font-face linking to the fonts.gstatic.com:

Mail source (via Thunderbird source view)

<head>
<meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3Diso-8859-=
1"><meta name=3D"viewport" content=3D"width=3Ddevice-width, initial-scale=
=3D1.0">
<style>
    @font-face {
        font-family: 'Source Sans Pro';
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV=
-LCoeQqfX1RYOo3ik4zwlxdu.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C=
6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2=
212, U+2215, U+FEFF, U+FFFD;
    }
    body {
        padding: 0;
        margin: 0;
        font-family: 'Source Sans Pro', 'Segoe UI', 'Droid Sans', Tahoma, A=
rial, sans-serif;
        background: #F1F2F6;

    }
    ...
</style>
</head>

NOT Working: Using link tag linking to font-source-sans-pro-300.e7f3684c.css:

Mail source (via Thunderbird source view)

<head>
<meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3Diso-8859-=
1"><meta name=3D"viewport" content=3D"width=3Ddevice-width, initial-scale=
=3D1.0">
    <link href=3D"https://example.com/public/assets/dist/font-source-sans=
-pro-300.e7f3684c.css" rel=3D"stylesheet">
<style>
    body {
        padding: 0;
        margin: 0;
        font-family: 'Source Sans Pro', 'Segoe UI', 'Droid Sans', Tahoma, A=
rial, sans-serif;
        background: #F1F2F6;

    }
    ...
</style>
</head>

font-source-sans-pro-300.e7f3684c.css definitely exists (called via Chrome).

https://example.com/public/assets/dist/font-source-sans-pro-300.e7f3684c.css

@font-face{font-display:swap;font-family:Source Sans Pro;font-style:normal;font-weight:300;src:url(/public/assets/dist/fonts/source-sans-pro-cyrillic-ext-300-normal.dccf01dc.woff2) format("woff2"),url(/public/assets/dist/fonts/source-sans-pro-cyrillic-ext-300-normal.47a42b8f.woff) format("woff");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-display:swap;font-family:Source Sans Pro;font-style:normal;font-weight:300;src:url(/public/assets/dist/fonts/source-sans-pro-cyrillic-300-normal.fbcc5580.woff2) format("woff2"),url(/public/assets/dist/fonts/source-sans-pro-cyrillic-300-normal.c67ae20d.woff) format("woff");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-display:swap;font-family:Source Sans Pro;font-style:normal;font-weight:300;src:url(/public/assets/dist/fonts/source-sans-pro-greek-ext-300-normal.1854cf65.woff2) format("woff2"),url(/public/assets/dist/fonts/source-sans-pro-greek-ext-300-normal.ce7070f7.woff) format("woff");unicode-range:u+1f??}@font-face{font-display:swap;font-family:Source Sans Pro;font-style:normal;font-weight:300;src:url(/public/assets/dist/fonts/source-sans-pro-greek-300-normal.e9753ea4.woff2) format("woff2"),url(/public/assets/dist/fonts/source-sans-pro-greek-300-normal.ae46fd41.woff) format("woff");unicode-range:u+0370-03ff}@font-face{font-display:swap;font-family:Source Sans Pro;font-style:normal;font-weight:300;src:url(/public/assets/dist/fonts/source-sans-pro-vietnamese-300-normal.ee5533f3.woff2) format("woff2"),url(/public/assets/dist/fonts/source-sans-pro-vietnamese-300-normal.01ae78a9.woff) format("woff");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-display:swap;font-family:Source Sans Pro;font-style:normal;font-weight:300;src:url(/public/assets/dist/fonts/source-sans-pro-latin-ext-300-normal.7087488c.woff2) format("woff2"),url(/public/assets/dist/fonts/source-sans-pro-latin-ext-300-normal.bbc0d99b.woff) format("woff");unicode-range:u+0100-02af,u+0304,u+0308,u+0329,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-display:swap;font-family:Source Sans Pro;font-style:normal;font-weight:300;src:url(/public/assets/dist/fonts/source-sans-pro-latin-300-normal.1fc6c01d.woff2) format("woff2"),url(/public/assets/dist/fonts/source-sans-pro-latin-300-normal.09c2ee34.woff) format("woff");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}

As you can see multiple fonts are linked to support all unicode ranges with URL relative to. example.com (src:url(/public/...). I can also download the fonts with a browser e.g. https://example.com/public/assets/dist/fonts/source-sans-pro-latin-ext-300-normal.bbc0d99b.woff

The Thunderbird inspector clearly shows that Arial is used instead of Source Sans Pro:

Arial used

I would expect my Mail to work, as link tags even seems recommended to load web fonts in mails: https://www.litmus.com/blog/typography-tips-for-email-designers

Only idea I have is that the relative urls in font-source-sans-pro-300.e7f3684c.css are not allowed, but this is "the way" to link relative files in CSS.

Do have an idea or know why web font is not working in my Mail?

Solution

  • As commented by tacoshy <link> is not supported by Thunderbird: https://www.caniemail.com/features/html-link/