This longer post will be centered only on adding custom fonts for the new email editor, but don’t worry - I’ve included Loom videos and some links below that show how to add fonts in the classic editor as well!
To add a custom font to the new email editor, first collect your import link. This import link can be from google fonts, adobe typekit, or if you’re using a font that is not available on google/adobe, the font file has to be uploaded to either your website’s (ex: add font file to Shopify) backend or your DNS provider (ex: add font to AWS). All you will need to add the font to Klaviyo, is an import link of any kind. Screenshots attached of different import links.
Once you have the import link, navigate to Brand Library in your account. Select Fonts > select which font type you are importing.
Please note, not all email clients will show custom fonts, so a fall back font is needed for all custom fonts. The fallback font will show when an email client can’t load the custom font.
For Google: You will just need to select the name of your font, since Google Fonts are free and natively connected to Klaviyo. Select which fallback font you want to show.
For Adobe: You will need to copy the import font from Adobe. You will need an Adobe account to use Adobe typekit fonts. Find the font you want to use, select the </> button, create a new project, name the project, save. Select the IMPORT LINK, copy the import link. This is the link you will paste into Klaviyo Brand Library > Adobe import link. Give a fallback font, save, done! Screenshots attached at bottom of post of all these steps.
For Importing Font: You will need to copy the import font from wherever you are hosting the font (Shopify theme, AWS, etc). It will be up to you/your team to know how to locate the import link. Name the font, add the font weight - this is how bold the font you are importing will be. Paste in the import link under Source Address. Select a fallback font, done!
In the new email editor, you can select the custom font under Styles > Texts & Headings > Fonts dropdown.
Watch out for my next post on a topic that I was super excited for: Universal Content!
New Editor - Applying Adobe Fonts
New Editor - Applying Google Fonts
The classic editor is deprecated as of May 2023. Please use the New Editor Custom Font practice.
Classic Editor - Applying Adobe Fonts
Classic Editor - Applying Google Fonts
Additional Resources: