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.