Custom fonts help you keep consistent typography across your emails and match your brand identity. When you add a custom font in Stripo, you can choose how the font is loaded in the email: <link>, @import, or @font-face.
To use this feature, you need a font URL. For instructions on how to get one, see Managing custom fonts.
The loading method option appears only when you use an External URL. If you connect a font by Name only, no loading method is required.
All three methods load the same font from the same external URL when the email opens. The difference is how the request is made and how much code is added to your email.
This choice does not affect font support in email clients. Gmail, Outlook for Windows, and several other clients ignore web fonts and fall back to system fonts regardless of the method used.
For a full compatibility overview, see Email-safe, web, and custom fonts in email clients.
How does each method work?
Each method defines how the email client finds and applies the font:
<link>
<link> is an HTML tag placed in the <head> of the email. It points to an external stylesheet, which then loads the font.
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700" rel="stylesheet">
@import
@import is a CSS rule that loads an external stylesheet from inside a <style> block in the <head> of the email.
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700');
</style>
@font-face
@font-face is a CSS rule that defines the font directly, including its family name, weight, and font file location.
Unlike <link> and @import, it does not use a separate stylesheet. The font is embedded directly into the email.
<style>
@font-face {
font-family: 'Roboto';
font-weight: 400;
src: url('https://fonts.gstatic.com/.../roboto.woff2') format('woff2');
}
</style>
When you select `@font-face` in Stripo, the font CSS is added directly to your email’s <style> block.
What changes between the methods?
Three factors differ between the methods, while email client support stays the same.
<link> and @import add only a small reference to an external stylesheet. @font-face embeds the full font declaration directly into the email, which increases email size, especially when multiple weights are used.
Email service providers may also handle these methods differently. Some support @import but not <link>. In some cases, <link> requests may be tracked as opens. Check your ESP documentation before choosing a default method.
Large emails may be clipped in Gmail (over ~102 KB), which can hide content at the end of the message, including the unsubscribe link.
Email clients behave the same regardless of the method. If web fonts are not supported, they fall back to system fonts.
Which method to choose?
If you want | Choose | Why |
The lightest and simplest setup |
| One line in the |
The same lightweight approach inside CSS |
| Useful when you keep all styles inside a single |
A fully embedded font definition |
| No external stylesheet, but increases email size |
For most campaigns, <link> or @import are the safest choice. Use @font-face only when you need full control and can accept a larger email size.
Pre-send checklist:
Before you send an email that uses any of the three methods:
A font URL must contain only one font family
Use only the weights and styles you actually use
Each additional weight increases email size, especially with
@font-faceIf you're using
@font-face, keep an eye on email size, especially for Gmail audiencesAlways define a fallback font
Test emails in Gmail, Outlook, and Apple Mail before sending
Use tools like Litmus or Email on Acid to preview rendering across clients. In Stripo, you can also run an Email on Acid test before sending.
Thank you for taking the time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at support@stripo.email.
We would be glad to talk with you.