Fonts¶

It's recommended to use Web Safe Fonts when creating content for email and web. It's however possible to define and use custom fonts. The support for custom font-face is limited for emails.

Web Safe Fonts¶

The web safe fonts are automatically usable in Lime Marketing.

Sans serif

Arial
Arial Black
Verdana
Geneva
Helvetica
Comic Sans MS
Impact
Lucida Sans
Tahoma
Trebuchet MS

Serif

Georgia
Palatino
Times New Roman
Garamond

Monospaced

Courier New
Lucida Console

Custom Fonts¶

To start using a custom font it need to be imported into the content. If you don't have public accessible link to the font (.woff2) it can be uploaded in the Lime Marketing File Archive and get the link from there.

Emails¶

The support for custom fonts are limited.

External font via .woff2 file¶

Add the style to import the font. In this example two fonts are imported and named galano-grotesque and galano-grotesque-bold. These names are later referenced to use these fonts.

<!-- (should be placed within the <head> section) -->
<style>
    @font-face {
        font-family : 'galano-grotesque';
        font-style : normal;
        font-weight : bold;
        font-stretch : 100%;
        src : url(https://app.bwz.se/customer/b/uf/file/69_galano-grotesque-regular.woff2) format('woff2');
    }

    @font-face {
        font-family : 'galano-grotesque-bold';
        font-style : normal;
        font-weight : bold;
        font-stretch : 100%;
        src : url(https://app.bwz.se/customer/b/uf/file/68_galano-grotesque-bold.woff2) format('woff2');
    }
</style>

Update CSS to use imported fonts. Update an existing style section or add this.

<!--  (should be placed within the <head> section) -->
<style>

    .nada {}

    .nada, body, .buttontext, .buttontext2, .buttontext2n, .bodytext, .bodytext_s, .bodytext_w, .bildtext, .smalltext, .avslut, .bodytext_i, .ingress, .ingress_w, .linktext {
        FONT-FAMILY: Arial, Helvetica, verdana, sans-serif;
    }
    .preheader, .footer, .footerheader, .footers, .webversion {
        FONT-FAMILY: Arial, Helvetica, verdana, sans-serif;
    }
    .header0, .header1, .header1_w, .header2, .header3 {
        font-family: Arial, Tahoma, Helvetica, sans-serif;
    }

    <!--
    [if !mso]>
    <!--
    -->
    .nada {
    }

    .nada, BODY, .preheader, .footer, .footerheader, .footers, .webversion, .bodytext, .bodytext3, .smalltext, .bildtext {
        FONT-FAMILY : 'galano-grotesque', Arial, Helvetica, sans-serif !important;
    }

    .buttontext, .texttext, .texttext2, .buttontext2, .bodytext, .linktext, .header3, .header4 {
        FONT-FAMILY : 'galano-grotesque-bold', Arial, Helvetica, sans-serif !important;
    }

    h2, .header0, .header1, .header2, .header1_w, .bw-form-submit-button {
        FONT-FAMILY : 'Bricolage Grotesque', Arial, Tahoma, Helvetica, sans-serif !important;
    }
    <!--
    <![endif]
    -->
</style>

Webpages¶

The support to use custom fonts for webpages are good.

External font via linked stylesheet¶

Import the stylesheet by adding it as link. Should be as a child of the <head> tag before any <style> tags

    <!-- (should be placed within the <head> section) -->
    <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],200..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

Update CSS to use imported fonts. Update an existing style section or add this (should be placed within the <head> section). You need to know the name of the declared fonts from the linked stylesheet.

    <!--  (should be placed within the <head> section) -->
    <style>

        BODY, .preheader, .footer, .footerheader, .footers, .webversion, .bodytext, .bodytext3, .smalltext, .bildtext {
            FONT-FAMILY : 'galano-grotesque', Arial, Helvetica, sans-serif !important;
        }

        .buttontext, .texttext, .texttext2, .buttontext2, .bodytext, .linktext, .header3, .header4 {
            FONT-FAMILY : 'galano-grotesque-bold', Arial, Helvetica, sans-serif !important;
        }

        h2, .header0, .header1, .header2, .header1_w, .bw-form-submit-button {
            FONT-FAMILY : 'Bricolage Grotesque', Arial, Tahoma, Helvetica, sans-serif !important;
        }
    </style>

External font via .woff2 file¶

Add the style to import the font. In this example two fonts are imported and named galano-grotesque and galano-grotesque-bold. These names are later referenced to use these fonts.

    <!--  (should be placed within the <head> section) -->
    <style>        
        @font-face {
            font-family : 'galano-grotesque';
            font-style : normal;
            font-weight : bold;
            font-stretch : 100%;
            src : url(https://app.bwz.se/customer/b/uf/file/69_galano-grotesque-regular.woff2) format('woff2');
        }

        @font-face {
            font-family : 'galano-grotesque-bold';
            font-style : normal;
            font-weight : bold;
            font-stretch : 100%;
            src : url(https://app.bwz.se/customer/b/uf/file/68_galano-grotesque-bold.woff2) format('woff2');
        }
    </style>

Update CSS to use imported fonts. Update an existing style section or add this

<!--  (should be placed within the <head> section) -->
<style>

    BODY, .preheader, .footer, .footerheader, .footers, .webversion, .bodytext, .bodytext3, .smalltext, .bildtext {
        FONT-FAMILY : 'galano-grotesque', Arial, Helvetica, sans-serif !important;
    }

    .buttontext, .texttext, .texttext2, .buttontext2, .bodytext, .linktext, .header3, .header4 {
        FONT-FAMILY : 'galano-grotesque-bold', Arial, Helvetica, sans-serif !important;
    }

    h2, .header0, .header1, .header2, .header1_w, .bw-form-submit-button {
        FONT-FAMILY : 'Bricolage Grotesque', Arial, Tahoma, Helvetica, sans-serif !important;
    }
</style>