@font-face

  • Resolved s1b2

    (@s1b2)


    5 years, 5 months ago

    Hi, i’m trying to use @font-face to use a custom font in a email template but it just isn’t working.

    Code i’m using is: 

    @font-face {
    font-family: 'kgsmalltownsoutherngirl-webfont';
    src: url('https://xxx/public_html/fonts/kg/kgsmalltownsoutherngirl-webfont.woff2') format('woff'),
	     url('https://xxx/public_html/fonts/kg/kgsmalltownsoutherngirl-webfont.woff2') format('woff2'),
	     url('https://xxx/public_html/fonts/kg/kgsmalltownsoutherngirl-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

H1, H2 {

    font-family: 'kgsmalltownsoutherngirl-webfont';
    color: #003377;       
}

    Should be working, not sure why it isn’t? Dose the pluging support this?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Blobfolio

    (@blobfolio)

    Hi @s1b2,

    By default, Well-Handled parses and inlines any styles it finds between <style> tags and then removes those tags.

    But since at-rules like @font-face and @import cannot be inlined in this fashion, they’re basically being deleted from the template.

    To fix that, you just need to set the strip_style_tags option to false (or when previewing, uncheck “Strip Style Tags”).

    That said, many email and webmail apps still lack support for web fonts, so even if your code is there, they might not render. It is a good idea to specify (local) fallback families, like:

    
H1, H2 {
    font-family: 'kgsmalltownsoutherngirl-webfont', Georgia, Times, 'Times New Roman', serif;
    color: #003377;       
}
    • This reply was modified 5 years, 5 months ago by Blobfolio.
    Thread Starter s1b2

    (@s1b2)

    Thanks for the reply, i’m pretty new to coding and wasn’t sure what was going wrong. Thaks for explaining it, i will set the strip_style_tag to false and try setting local fallback fonts as well.

    Cheers.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘@font-face’ is closed to new replies.