Novu Layout Font Issue Error
Hey I have been working with Novu layouts and have been using custom fonts but the fonts does not seem to be working
Here is the code snippet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Email Template</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://enterprise.commenda.io/fonts/Satoshi-Medium.ttf" />
<link href="https://enterprise.commenda.io/fonts/satoshi/Satoshi-Bold.ttf" />
<style>
@font-face {
font-family: "Satoshi";
src: url("https://enterprise.commenda.io/fonts/satoshi/Satoshi-Bold.woff2")
format("woff2"),
url("https://enterprise.commenda.io/fonts/satoshi/Satoshi-Bold.woff")
format("woff"),
url("https://enterprise.commenda.io/fonts/satoshi/Satoshi-Bold.ttf")
format("truetype");
font-weight: 700;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "Satoshi";
src: url("https://enterprise.commenda.io/fonts/satoshi/Satoshi-Medium.woff2")
format("woff2"),
url("https://enterprise.commenda.io/fonts/satoshi/Satoshi-Medium.woff")
format("woff"),
url("https://enterprise.commenda.io/fonts/satoshi/Satoshi-Medium.ttf")
format("truetype");
font-weight: 500;
font-display: swap;
font-style: normal;
}
body {
padding: 24px 0px;
margin: 0;
width: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-family: "Satoshi", Arial, sans-serif;
background-color: #ffffff;
color: #000000;
}
</style>
</head>
5 Replies
Hi @devAdarsh, I'm an AI assistant for Novu. While a team member reviews this question, I'll see if I can find relevant sources for your question.
-----------------------------
While I generate an answer, here are some sources that might be helpful:
* Content Creation
* Brand
* Mailersend
* Update organization branding details
-----------------------------
Answer
I understand you're experiencing issues with custom fonts in your Novu layout. Let's address this problem based on the information available.
When working with custom fonts in email templates, there are a few important considerations to keep in mind:
1. Email clients have limited support for custom fonts (1) . Many email clients strip out
<style> tags and don't support @font-face declarations .
2. For email templates, it's recommended to use inline CSS instead of separate <style> tags . This is because some email clients remove or ignore <style> tags .
3. When using custom fonts, it's crucial to provide fallback fonts that are widely supported across different email clients .
To address your specific issue, here are some suggestions:
1. Instead of using @font-face declarations, try using inline CSS with web-safe fonts as fallbacks . For example:
2. If you want to use custom fonts, consider using a web font service that is specifically designed for email, such as Google Fonts . These services often provide better compatibility across email clients.
3. Make sure to test your email template across different email clients to ensure consistent rendering .
4. If you're using the Novu dashboard to create your email template, remember that you can use the custom code editor for more complex layouts . This might give you more control over the font implementation.
If you continue to experience issues, you might want to consider simplifying your font choices to use web-safe fonts that are widely supported across email clients. This can help ensure consistent rendering of your emails across different platforms.
Remember, email client support for custom fonts can be inconsistent, so it's always a good practice to thoroughly test your templates across various email clients and devices.
If you need further assistance or if this doesn't solve your issue, you might want to click on the "Ask for help" button to tag a team member for a more detailed review of your specific setup.
Feel free to tag @Ask Inkeep with additional questions.
Got it. Tagging @Support for additional help.
@devAdarsh
Looks like it is not loading the custom font.
Would you like to create a bug on github for this?
!bug