@ Font-face có hoạt động trong các mẫu email không?

Question

Có cách nào để tôi có thể nhúng phông chữ web tùy chỉnh bằng cách sử dụng các mẫu email @font-face của CSS. Câu hỏi này liên quan cụ thể đến các mẫu email trong MailChimp, nhưng tôi cũng muốn biết liệu có giải pháp trình duyệt chéo hoạt động trên tất cả hoặc hầu hết các dịch vụ đăng ký email không?

Tôi đã xem xét nhúng nó trong tiêu đề kiểu cách này:

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

Nhưng tôi sợ này mạnh sẽ ảnh hưởng đến tải trang. Có cách nào tốt hơn?

Cập nhật: Vì lợi ích của việc tìm kiếm giải pháp phổ quát, đây KHÔNG phải là phông chữ của Google hoặc phông chữ tồn tại trong bất kỳ loại thư viện nguồn trực tuyến nào.

Answer 1

Bạn có thể! Nhưng với tất cả những điều thú vị trong html-email, nó sẽ không hoạt động trong mọi trình duyệt/khách hàng.

@font-face sẽ hoạt động trong iOS và (hầu hết) ứng dụng khách mặc định của Android, Apple Mail và Outlook 2011 dành cho máy Mac. Mọi thứ khác sẽ chặn toàn bộ thẻ <style> của bạn hoặc chỉ bỏ qua nó.

Một số biện pháp phòng ngừa: font-face freaks ra Outlook '07 -'13, do đó, quấn CSS phông chữ của bạn trong thẻ kiểu riêng của nó, trong một MSO có điều kiện. Đảm bảo bạn sử dụng tất cả các loại tệp phông chữ trong @font-face - otf, ttf, eot, svg của bạn để nó hoạt động trên các trình duyệt. Sau đó, hãy chắc chắn rằng bạn có nhược điểm tốt khi bạn thử và sử dụng nó. Ít nhất bạn nên có font-family:'Custom Font',sans-serif; (hoặc 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

One gotcha là Chia sẻ nguồn gốc chéo (CORS). Đối với ít nhất Thunderbird, bạn phải đảm bảo rằng máy chủ từ xa (lưu trữ phông chữ) sẽ gửi tiêu đề HTTP như:

Access-Control-Allow-Origin: *