Adding web fonts to HTML email in Luminate
Hello, everyone.
import, but that isn't working.
I know that web fonts will not work on most email platforms. But, the client wants to use them for those subscribers who use platforms that do.
Has anyone else been able to successfully add web fonts to their emails on Luminate?
Any help would be greatly appreciated!
Kevin
import, but that isn't working.
I know that web fonts will not work on most email platforms. But, the client wants to use them for those subscribers who use platforms that do.
Has anyone else been able to successfully add web fonts to their emails on Luminate?
Any help would be greatly appreciated!
Kevin
Tagged:
0
Comments
-
Hey Kevin. The solution we've found for this is to add <style type="text/css"> info into the email itself, using the plain text editor - it appears above everything else that starts your email (any preheader, any banner, any body, etc.)
Here's the full example we use for some emails currently - it's calling in "normal" fonts, but you can use it with web fonts too. Hope you find this useful.
Cheers,
Grace
<style type="text/css"><!--
BODY {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
}
td
{
font-size:10pt;
font-family:Arial, Helvetica, sans-serif !important;
}
table
{
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
}
OL
{
font-size: 10pt;
font-family: Arial, Helvetica, sans-serif;
}
LI
{
font-size: 10pt;
font-family: Arial, Helvetica, sans-serif;
margin-top: 0px;
}
UL
{
font-size: 10pt;
font-family: Arial, Helvetica, sans-serif;
margin-top: 0px;
}
P
{
font-size: 10pt;
font-family: Arial, Helvetica, sans-serif !important;
}
}
A:link { color: #003366;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 10pt !important;
}
A:visited { color: #003366;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 10pt !important;
}
A:hover, A:active { color: #0000FF;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 10pt !important;
}
--></style>0 -
Hi Kevin,
Try calling your webfont and using @import in the html section of your Stationery.
For example:
As you are aware, not all email providers will render it, but most will and you can always use a web safe font as fallback.
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
</style>
Hope this helps!
Robin
0 -
This is my go to from Litmus:
https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/
It has been updated in the last few months to account for current functionality.
I just used it the other day.
Thanks,
Phil2
Categories
- All Categories
- New YourCause Community TEST
- New SKY Community TEST
- New Grantmaking TEST Community
- New Altru Test Community
- New bbcon Community - TEST
- 12 Blackbaud Agents for Good™
- New Raiser's Edge NXT Community
- 7 Blackbaud Community Help
- 218 bbcon®
- 1.4K Blackbaud Altru®
- 409 Blackbaud Award Management™ and Blackbaud Stewardship Management™
- 1.2K Blackbaud CRM™ and Blackbaud Internet Solutions™
- 16 donorCentrics®
- 361 Blackbaud eTapestry®
- 2.7K Blackbaud Financial Edge NXT®
- 680 Blackbaud Grantmaking™
- 598 Blackbaud Education Management Solutions for Higher Education
- 3.3K Blackbaud Education Management Solutions for K-12 Schools
- 952 Blackbaud Luminate Online® and Blackbaud TeamRaiser®
- 85 JustGiving® from Blackbaud®
- 7K Blackbaud Raiser's Edge NXT®
- 3.9K SKY Developer
- 257 ResearchPoint™
- 123 Blackbaud Tuition Management™
- 165 Organizational Best Practices
- 247 Member Lounge (Just for Fun)
- 40 Blackbaud Community Challenges
- 37 PowerUp Challenges
- 3 (Closed) PowerUp Challenge: Grid View Batch
- 3 (Closed) PowerUp Challenge: Chat for Blackbaud AI
- 3 (Closed) PowerUp Challenge: Data Health
- 3 (Closed) Raiser's Edge NXT PowerUp Challenge: Product Update Briefing
- 3 (Closed) Raiser's Edge NXT PowerUp Challenge: Standard Reports+
- 3 (Closed) Raiser's Edge NXT PowerUp Challenge: Email Marketing
- 3 (Closed) Raiser's Edge NXT PowerUp Challenge: Gift Management
- 4 (Closed) Raiser's Edge NXT PowerUp Challenge: Event Management
- 3 (Closed) Raiser's Edge NXT PowerUp Challenge: Home Page
- 4 (Closed) Raiser's Edge NXT PowerUp Challenge: Standard Reports
- 4 (Closed) Raiser's Edge NXT PowerUp Challenge: Query
- 822 Community News
- 3.1K Jobs Board
- 57 Blackbaud SKY® Reporting Announcements
- 47 Blackbaud CRM Higher Ed Product Advisory Group (HE PAG)
- 19 Blackbaud CRM Product Advisory Group (BBCRM PAG)


