nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Adding web fonts to HTML email in Luminate

Kevin Reid

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

Find more posts tagged with

LuminateOnline

Comments

Grace Rose Khalsa

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"></style>

Robin Anderson

Hi Kevin,

Try calling your webfont and using @import in the html section of your Stationery.

For example:


<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>

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.

Hope this helps!

Robin

Philip Nawrocki

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,

Phil