2013-06-29 7 views
18

Eine HTML-E-Mail muss (sollte) ihr CSS inline haben, um das erwartete Design in den meisten E-Mail-Clients zu haben.Gibt es eine Möglichkeit, Google Web Fonts in einer HTML-E-Mail zu verwenden?

Gibt es eine Möglichkeit, eine Google Web-Schriftart mit einer solchen E-Mail zu verknüpfen oder in diese einzubetten, aber dennoch eine breite Akzeptanz (angemessenes Rendering) unter E-Mail-Clients zu wahren?

Ich weiß, dass eine Alternative wäre, ein Bild mit der entsprechenden Typografie zu haben, aber ich würde zuerst nach etwas anderem suchen, das funktionieren könnte.

Antwort

28

Wenn die Schriftart unbedingt erforderlich ist, müssen Sie mit dem Text als Bildlösung gehen. Ab Dezember unterstützen nur iOS Mail, Mail.app, Lotus Notes 8, Standard Mail auf Android, Outlook 2000 und Thunderbird die Verwendung einer externen benutzerdefinierten Schriftart.

See: http://www.campaignmonitor.com/blog/post/3897/using-web-fonts-in-email


bearbeiten 2014.02.10: Da dies eine meiner beliebtesten Antworten, hier ist die aktualisierte Verknüpfung der bewährten Methoden der Web-Fonts in E-Mails:

http://www.campaignmonitor.com/resources/will-it-work/webfonts/

+0

Großen Link! Vielen Dank! –

4

Sie können jetzt das NPM-Paket custom-fonts-in-emails verwenden, um benutzerdefinierte Schriftarten als Bilder in Ihre E-Mails einzubetten. https://github.com/crocodilejs/custom-fonts-in-emails

import customFonts from 'custom-fonts-in-emails'; 
import path from 'path'; 

const options = { 
    text: 'Make something people want', 
    fontNameOrPath: 'GoudyBookletter1911', 
    fontColor: 'white', 
    backgroundColor: '#ff6600', 
    fontSize: 40 
}; 

customFonts.png2x(options) 
    .then(console.log) 
    .catch(console.error); 

Ausgänge:

<img width="461" height="51" src="data:image/png;base64,..." title="Make something people want" alt="Make something people want" style="color: white;font-size: 25.5px;line-height: 51px;text-align: center;background-color: #ff6600;"> 

Renders:

Verwandte Themen