<link> is similar to
@font-face. In fact, I couldn't find a client where
@font-face worked and
<link> didn't. Here are my findings with the three methods:
Outlook Android (Link only)
Samsung Mail (Link only)
Android 5.1, 6.0
Inbox by Gmail
Just make sure to wrap the
<link> tag in outlook conditionals.
I have gotten away from using tables for buttons. I use the border attribute for padding since it works across clients. The only caveat is outlook does not support having different border widths for left/right vs top/bottom. To account for this I set the I use a separate border-width attribute which works for non-outlook clients and then outlook conditionals with non-breaking spaces to add additional space on the left and right sides in outlook.
To simulate an actual border I use a box-shadow. It doesn't work on all clients but considering the code savings of this approach vs a table, I'm fine with the border being a progressive enhancement. A list of supported clients can be found here.
<a href="#" target="_blank" style="background-color:#700429;border:8px solid #700429;border-radius:5px;border-width:8px 50px;box-shadow:0 0 0 1px #3f0217;color:#ffffff;display:inline-block;font-size:20px;font-weight:bold;text-align:center;text-decoration:none;"><!--[if (mso)]> <![endif]-->Your Button Text<!--[if (mso)]> <![endif]--></a>