How to use @font-face in an email?

Question

Here's a tricky question about CSS. I have to send an email with some styles. The only way to make styles work in the email is writing them just after the tags (I cannot even write a <style type="text/css"> because mail server ignores it). So, this is an example of what I have to do:

<div style="background: red;"></div>

For instance, that works perfect. The problem is I need to use the css @font-face query. Is there any way to include it like this?

<div style="background: red; @font-face { font-family: 'myFont'; src: url('myURL'); }"></div>

Note: obviously last line is not working at all.

Here is a similar post with an answer:

Can @fontface be used within a tag? (for email signature reliability)

But I cannot use an external style sheet or copy it in a style section, because it will not work.

Thank you in advance.

Answer 1

Take a look at this. After much testing it is the best supported technique I came up with for webfonts.

If you want it only for a signature, say out of Outlook - There is no technique I'm aware of. Even though you can call it inline, all the techniques to actually add/call the webfont URL need to be in a <style> tag. It is like trying to call an external style sheet inline... Don't think it is possible.

Also, in html email, you need to use the 6-digit hex code when declaring colors. Try background-color:#FF0000;