Menu

Examples

Use custom fonts

This example shows how to use custom fonts such as Google Fonts in the template.

Code

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

Usage

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.