Webfonts not working in mail loaded via stylesheet `link`

52 Views Asked by At

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?

1

There are 1 best solutions below

0
goulashsoup On BEST ANSWER

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