@font-face { font-family: 'YourFont'; src: url('yourfont.eot'); src: url('yourfont.eot?#iefix') format('embedded-opentype'), url('yourfont.woff') format('woff'), url('yourfont.ttf') format('truetype'), url('yourfont.otf') format('opentype'), url('yourfont.svg#YourFont') format('svg'); }
These are added within a <style> section in the header. This works all nicely in most modern email clients, but Outlook does not load webfonts and falls back to Times New Roman, which might not always be desired.
[style*="YourFont"] { font-family: 'YourFont', 'Century Gothic', CenturyGothic, AppleGothic, Arial, sans-serif !important }
Add this to the header <style> section as well. This makes sure that in clients, that allow Webfonts, your font is actually being used.
<table> <tr> <td style="background:white;height:30px;font-family: Arial, 'YourFont', 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;"> Some text! </td> </tr> </table>
In the body of the email template, you assign your font-family styles for the text, but making sure that Arial is listed first.
Outlook will than use Arial for the text styling.
In modern clients this will be overwritten with the “style rule” above, which checks for YourFont and updates the font-family styling accordingly.
What are particle animations? Particle network animations in JavaScript typically involve creating visual representations of… Read More
BOOKING SOLUTIONS 202x This is my take on a subset of booking, appointment, PMS or… Read More
THE GOAL Create a system cron for WordPress, that is accessible and can be easily… Read More
2024, what's cooking? Slowly getting into the 2024 spirit. 3 projects coming to a close… Read More
Short look back at 2023 This has been a busy and interesting year. I am… Read More
Elementor Pro provides grid containers as an experimental feature. The options provided are limited, when… Read More