how to use custom CSS to change font style

  • I am trying to force all text in emails to use “Nunito” font style
    I have tried adding the following code into Custom CSS box
    <link href=”https://fonts.googleapis.com/css?family=Nunito&#8221; rel=”stylesheet”>
    p {
    font-family: ‘nunito’, sans-serif;
    };
    h1 {
    font-family: ‘nunito’, sans-serif;
    };
    h2 {
    font-family: ‘nunito’, sans-serif;
    };
    h3 {
    font-family: ‘nunito’, sans-serif;
    };
    Apparently in the preview the body text font style changes, but in the emails I sent to myself (Gmail and yahoo) it doesn’t keep the font.
    All the rest of the email remains unaffected by the font change even in the preview (apparently the font name is hardcoded in each instance of text).
    Is there a way I can change the font in the emails to give a look consistent to my brand?
    thanks
    Francesco

Viewing 1 replies (of 1 total)

  • Hey,
    Emails work so much differently then html. Yes, all styles as intentionally inline so that you get the most email client support.

    Here is how you can add a custom font and set it. BUT it must be clear most email clients don’t allow this. Even googles app doesn’t allow this. So I suggest you sticky with websafe fonts from the plugin selection.

    @import url('https://fonts.googleapis.com/css?family=Nunito');
#template_header h1, #template_header .subtitle, #body_content_inner, .td, .text, #template_body h2, #template_body h2 a, #template_body h3, #template_footer a.ft-social-link, #template_footer #credit {
font-family: 'Nunito', sans-serif !important;
}

    BEn

Viewing 1 replies (of 1 total)
  • The topic ‘how to use custom CSS to change font style’ is closed to new replies.