Schriftart in Newsletter einbinden

[webald]

Hat jemand einen Trick wie ich in Newslettern eine bestimmte Schriftart nutzen kann?

Code: PHP  [Auswählen]

<style type="text/css">@font-face {
    font-family: 'a0933Regular';
    src: url('https://mydomain.tld/media/fonts/a0933Regular.eot');
    src: url('https://mydomain.tld/media/fonts/a0933Regular.eot') format('embedded-opentype'),
         url('https:/mydomain.tld/media/fonts/a0933Regular.woff2') format('woff2'),
         url('https://mydomain.tld/media/fonts/a0933Regular.woff') format('woff'),
         url('https://mydomain.tld/media/fonts/a0933Regular.ttf') format('truetype'),
         url('https://mydomain.tld/media/fonts/a0933Regular.svg#a0933Regular') format('svg');
}
</style>

Damit habe ich die Schriftart zwar verlinkt und im Backend wird die auch richtig angezeigt, aber beim Empfänger (hier:Outlook) eben nicht mehr.

Irgendwelche Ideen?

Linkback: https://www.modified-shop.org/forum/index.php?topic=37504.0

[Jürgen]

Hallo webald,

auf die Schnelle das hier gefunden....

Quelle https://www.campaignmonitor.com/blog/email-marketing/2012/12/using-web-fonts-in-email/

Outlook web font bug

As with many things email, web fonts come with its own particularly annoying problem. In this case: Outlook 2007/2010/2013/2016.

If you use a web font in your email, Outlook will ignore your fallback font and render your text using Times New Roman, a serif font, even though you might have specified sans serif fallbacks.
When Outlook encounters the @font-face rule in your stylesheet, Outlook registers the font name but does not process the font itself. When the font is used in your email, Outlook swaps the font with its default font: Times New Roman. The trick is to not have Outlook register the font in the first place.

You could make Outlook render your selected fallback font by hiding the linked stylesheet from Outlook by wrapping it within an Outlook conditional comment.

    <!--[if !mso]><!-- -->

    <link href='http://fonts.googleapis.com/css?family=Lobster’ rel='stylesheet' type='text/css' />

    <!--<![endif]-->

Outlook will ignore the linked stylesheet above and since it regards the Lobster font as simply missing, it will fall back to the next font in your chain which is Arial. Yay!

Others have found different ways to address this quirk such as using the font tag with the face attribute or overriding the web font styles in a CSS style block within a media query as Outlook ignores CSS within media queries.
@media screen{
  .webfont {
      font-family: ‘Lobster’, Arial, sans-serif !important;
  }
} 

Gruss

Jürgen

[webald]

Dass Outlook da mal wieder was besonderes ist, war schon klar. Aber nachdem das ja ein durchaus verbreitetes Proble ist, hatte ich gehofft irgendjemand hätte da einen Lösungsansatz.