क्या ईमेल टेम्पलेट्स में @ font-face काम करता है?

Question

क्या कोई तरीका है कि मैं ईमेल टेम्पलेट्स में सीएसएस के @font-face का उपयोग कर कस्टम वेब फोंट एम्बेड कर सकता हूं। यह प्रश्न विशेष रूप से MailChimp में ईमेल टेम्पलेट से संबंधित है, लेकिन मैं यह भी जानना चाहूंगा कि कोई क्रॉस-ब्राउज़र समाधान है जो सभी या अधिक ईमेल सदस्यता सेवाओं पर काम करता है?

मैं शैली शीर्षक में यह इस तरह से एम्बेड करने पर विचार किया है:

@font-face { 
    src: url("http://www.remoteserver.com/fonts/font.otf"); 
    font-family: Font; 
} 

लेकिन मुझे डर है कि यह तेजी से पेज लोड असर होता हूँ। क्या कोई बेहतर तरीका है?

अपडेट: सार्वभौमिक समाधान खोजने के लिए ये Google फोंट या फोंट नहीं हैं जो किसी भी प्रकार की ऑनलाइन स्रोत लाइब्रेरी में मौजूद हैं।

Answer 1

आप कर सकते हैं! लेकिन सभी चीजों के साथ एचटीएमएल-ईमेल में ठंडा यह हर ग्राहक/ब्राउज़र में काम नहीं करेगा।

@font-face मैक के लिए आईओएस और (अधिकांश) एंड्रॉइड के डिफ़ॉल्ट क्लाइंट, ऐप्पल मेल और आउटलुक 2011 में काम करेगा। बाकी सब कुछ या तो आपके पूरे <style> टैग स्ट्रिप्स या बस इसे अनदेखा करता है।

कुछ सावधानियां: फ़ॉन्ट-फेस आउटलुक '07 -13 'से बाहर निकलता है, इसलिए एमएसओ सशर्त में अपने फ़ॉन्ट-फेस सीएसएस को अपने स्वयं के स्टाइल टैग में लपेटें। सुनिश्चित करें कि आप अपने @font-face - otf, ttf, eot, svg में सभी प्रकार की फ़ॉन्ट फ़ाइलों का उपयोग करते हैं, इसलिए यह ब्राउज़र में काम करता है। फिर सुनिश्चित करें कि जब आप कोशिश करते हैं और इसका उपयोग करते हैं तो आपके पास अच्छी गिरावट होती है। कम से कम आपके पास font-family:'Custom Font',sans-serif; (या सेरिफ़) होना चाहिए।

<!--[if !mso]><!--> 
<style type="text/css"> 
    @font-face { 
    font-family: 'Custom-Font'; 
    font-weight: 400; 
    font-style: normal; 
    src: url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.svg#Customfont-Regular') format('svg'), 
     url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.eot?#iefix') format('embedded-opentype'), 
     url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.woff') format('woff'), 
     url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.ttf') format('truetype'); 
    } 
</style> 
<!--<![endif]--> 

Answer 2

एक पकड़ लिया क्रॉस-ओरिजिन साझा करने (CORS) का स्रोत है। https://www.campaignmonitor.com/resources/will-it -

Access-Control-Allow-Origin: *