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

Question

I am working on getting an email signature to take a custom look. It irks me that that I am compelled to go this route by the inconsistent rendering of email clients, but is there a way to make @fontface apply fonts to text by declaring the font style within a tag itself? Doing it the standards way (either with the styling in a header or within the HTML body) does not get the font to render on mobile email clients, though it does on some desktop apps.

I tried styling within the tag. (sample below) In theory this could work, but does not come out nicely on a browser. Should I let this one go, or are there better ways I am missing?

And just for clarity, this @fontface syntax does work for me when put in a correctly done style tag. Below is my attempt at defining it within the tag which yields weird results. Non-font styling comes through nicely, but the font gets put in as Times, not Tiemann. (Look at the "C" and the "Í" to tell them apart.)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-16be-with-bom" />
    <title>Untitled</title>
    <meta name="generator" content="BBEdit 10.5" />
</head>
<body>



<span  style="@font-face 

font-family:'Tiemann';
src: url('https://dl.dropboxusercontent.com/u/35370696/font_embed/tiemannlightwebfont.eot');
src: url('https://dl.dropboxusercontent.com/u/35370696/font_embed/tiemannlightwebfont.eot?#iefix') format('embedded-opentype'),
         url('https://dl.dropboxusercontent.com/u/35370696/font_embed/tiemannlightwebfont.woff') format('woff'),
     url('https://dl.dropboxusercontent.com/u/35370696/font_embed/Tiemann_Light.ttf') format('truetype'),
     url('https://dl.dropboxusercontent.com/u/35370696/font_embed/tiemannlightwebfont.svg#Tiemann') format('svg');

font-size:22pt;

color:#6D6D6D;
float:left;


">
 DIACRÍTICA 
</span>


</body>
</html>

If the standard way does not work in some user agent, why do you expect that some invented syntax would work better? When the standard way does not work, the reason is simply that the user agent does not support it (or its effect has been disabled). — Jukka K. Korpela, Sep 28 '13 at 19:06
My expectation is that asking a question about an area I am unfamiliar with would yield answers and it has. I could infer that your attitudes about invention should keep you in good stead comfortably performing work within what already exists. When standards do not work, invention is a reasonable way to approach things that behave in a non standard way. I'm sure that someone of your knowledgeable experience has taken advantage of that stance at times. — dgetzin, Sep 29 '13 at 04:12

score 1 · Accepted Answer · answered Sep 28 '13 at 17:04

Short story: font-face is an at-rule. Not happening. Use an external style sheet and put it there for proper guidelines and maintainability.

As an aside, note that @font-face may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

score 0 · Answer 2 · answered Sep 28 '13 at 17:04

0

Well first of all, this won't work because its not valid syntax; but more importantly - Tiemann may not be available on the target system; in which case you need to supply a generic font family. See this link for more information.

answered Sep 28 '13 at 17:04

Burhan Khalid

169,990
18
245
284

score 0 · Answer 3 · answered Sep 28 '13 at 17:07

0

CSS support in email clients varies quite alot and the browsers in question might just not support that property.

answered Sep 28 '13 at 17:07

hangy

10,765
6
43
63

score 0 · Answer 4 · answered Sep 28 '13 at 17:08

I don't think you can use it with inline styles, but you could use

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-16be-with-bom" />
    <title>Untitled</title>
    <meta name="generator" content="BBEdit 10.5" />
    <style type="text/css">
    @font-face {
        font-family:'Tiemann';
        src: url('https://dl.dropboxusercontent.com/u/35370696/font_embed/tiemannlightwebfont.eot');
        src: url('https://dl.dropboxusercontent.com/u/35370696/font_embed/tiemannlightwebfont.eot?#iefix') format('embedded-opentype'),
             url('https://dl.dropboxusercontent.com/u/35370696/font_embed/tiemannlightwebfont.woff') format('woff'),
             url('https://dl.dropboxusercontent.com/u/35370696/font_embed/Tiemann_Light.ttf') format('truetype'),
             url('https://dl.dropboxusercontent.com/u/35370696/font_embed/tiemannlightwebfont.svg#Tiemann') format('svg');
    }
    </style>

</head>
<body>


<span  style="font-family:'Tiemann'; font-size:22pt; color:#6D6D6D; float:left; ">
 DIACRÍTICA 
</span>


</body>
</html>

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

4 Answers4

Linked