This example shows how to use custom fonts such as Google Fonts in the template.
<!DOCTYPE html>
<html>
<head>
<title>Revolvapp</title>
<meta charset="utf-8">
<!-- css -->
<link rel="stylesheet" href="/your-folder/revolvapp.css" />
</head>
<body>
<!-- element -->
<div id="myemail"></div>
<!-- js -->
<script src="/your-folder/revolvapp.js"></script>
<!-- call -->
<script>
Revolvapp('#myemail', {
editor: {
font: 'Inter, Helvetica, Arial, sans-serif',
path: '/your-path-to-revolvapp-folder/',
template: '/your-path-to-template-file.html'
},
image: {
upload: '/my-backend-upload/'
}
});
</script>
</body>
</html>
First, you need to generate the link in the Google Fonts like this:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap rel="stylesheet">
Then add the link to font in the template between re-head
tag:
<re-html>
<re-head>
<re-title>Email Title</re-title>
<!-- Connect font from Google -->
<re-font href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"></re-font>
</re-head>
<re-body>
...
</re-body>
</re-html>
And finally set the styles option with your font:
Revolvapp('#myemail', {
editor: {
font: 'Inter, Helvetica, Arial, sans-serif',
path: '/your-path-to-revolvapp-folder/',
template: '/your-path-to-template-file.html'
}
});
See more about font tag.