Home > OS >  Custom Web Fonts in Emails
Custom Web Fonts in Emails

Time:01-07

I'm trying to send emails with custom web fonts as attachments. I'm using .NET MimeKit library for email sending. I'm attaching font file as a Stream to the BodyBuilder.LinkedResources as so:

body.LinkedResources.Add($"font{fontUrlIndex}", font.Stream);

Next I'm referencing that attachment in the @font-face CSS rule in the url() so it looks something like this:

@font-face {
  font-family: 'CustomMailingFont';
  font-weight: 400;
  font-style: normal;
  src: url("cid:font0") format('woff2');
}

Problem is that the font file is attached to the email message but the @font-face rule doesn't work.

When inspecting that message in the outlook web client the rule looks like this:

<style type="text/css" id="x_custom-font-face">
<!--
@font-face
    {font-family:'CustomMailingFont';
    font-weight:400;
    font-style:normal}
-->
</style>

As you can see the src property is missing. This mechanism of attaching files works on images in the message. When downloading the message in the .eml format and opening it in text editor that @font-face rule looks like I have shown before.

What am I missing? Is it even possible to attach custom fonts as files in a email message? Is there a way to see an error message why the src property is cropped?

CodePudding user response:

Custom web fonts require a @font-face declaration. And this typically does not work in all email clients. You can see which email clients support it on Can I email… @font-face

  • Related