แบบอักษรเว็บ: วิธีทำให้ทำงานได้อย่างสมบูรณ์แบบในอีเมล

เผยแพร่แล้ว: 2021-04-24

จากการศึกษาทางวิทยาศาสตร์ของฉัน (ฉันสังเกตลูกสาวของฉันขณะที่เธอเริ่มเขียนรายงานในช่วงปีที่ผ่านมา) ฉันได้เรียนรู้ว่าแง่มุมแรกๆ ของการออกแบบที่ผู้คนเริ่มเล่นคือการพิมพ์ตัวอักษร เมื่อคุณเริ่มเขียนรายงานครั้งแรก คุณใช้เวลาหลายชั่วโมงในการพยายามหาแบบอักษรที่ดีที่สุดที่จะใช้ โอเค อาจจะไม่ใช่ชั่วโมง แต่คนส่วนใหญ่ใช้เวลากับมันสักหน่อย เพราะอย่างที่แบรนด์ใหญ่รู้ดีว่าการพิมพ์มีความสำคัญ และมันสำคัญในอีเมล

แต่การเข้าถึงก็มีความสำคัญเช่นกัน ดังนั้น หยุดดักจับข้อความของคุณในรูปภาพ และเริ่มใช้ข้อความสดด้วยแบบอักษรที่ปลอดภัยสำหรับเว็บและแบบอักษรของเว็บแทน ท้ายที่สุด ข้อความที่ไม่ขึ้นอยู่กับรูปภาพและสามารถอ่านได้โดยผู้ชมที่กว้างขึ้นจะนำไปสู่ประสบการณ์ที่ยอดเยี่ยมสำหรับสมาชิก และในฐานะลูกค้าที่ดีที่สุดของคุณ อีเมลจะส่งคืน 36 ดอลลาร์สำหรับทุกๆ 1 ดอลลาร์ที่ลงทุน ซึ่งเหมาะสำหรับกลยุทธ์ทางการตลาดโดยรวมของคุณ

ในบล็อกโพสต์นี้ ฉันจะแยกย่อย:

แบบอักษรเว็บกับแบบอักษรที่ปลอดภัยสำหรับเว็บ
ประโยชน์ของเว็บฟอนต์
การสนับสนุนไคลเอ็นต์อีเมลและการออกใบอนุญาต
จะหาแบบอักษรเว็บได้ที่ไหน
การเข้ารหัสลงในอีเมล
ตัวอย่างที่ดีของแบบอักษรเว็บในอีเมล

แบบอักษรเว็บกับแบบอักษรที่ปลอดภัยสำหรับเว็บ

คุณสามารถแสดงข้อความสดได้สองวิธี: แบบอักษรที่ปลอดภัยสำหรับเว็บและแบบอักษรของเว็บ แม้ว่าจะฟังดูเหมือนกัน แต่ก็มีความแตกต่างที่ชัดเจน เพื่อให้เข้าใจความแตกต่างเหล่านี้ มาดูกันว่าฟอนต์ทำงานอย่างไรในอีเมลของคุณ

เมื่ออีเมลของคุณถูกเข้ารหัส ฟอนต์จะถูกประกาศโดยใช้คุณสมบัติ CSS ที่เรียกว่า font-family คุณสมบัติตระกูลฟอนต์นี้สามารถมีชื่อฟอนต์ได้เพียงชื่อเดียวหรือหลายชื่อฟอนต์—มักเรียกว่าสแต็กฟอนต์ การรวมชื่อแบบอักษรหลายชื่อช่วยให้แน่ใจว่าหากแบบอักษรหนึ่งไม่ทำงาน จะมีแบบอักษรสำรองหรือแบบอักษรสำรองที่คุณเลือก หากไม่มีการระบุชื่อแบบอักษรหลายชื่อ ไคลเอนต์อีเมลจะตัดสินใจเลือกแบบอักษรสำรองของคุณ เมื่อสมาชิกของคุณเปิดอีเมลของคุณ เบราว์เซอร์จะอ่านคุณสมบัติของฟอนต์-แฟมิลี่และดึงฟอนต์ไปใช้

แบบอักษรที่ปลอดภัยสำหรับเว็บ

ด้วยฟอนต์ที่ปลอดภัยสำหรับเว็บ เบราว์เซอร์จะดึงฟอนต์จากไดเร็กทอรีฟอนต์ในเครื่องของคุณ นั่นหมายความว่าฟอนต์เหล่านี้เป็นฟอนต์ที่ติดตั้งบนคอมพิวเตอร์ของคุณแล้ว คอมพิวเตอร์ทุกเครื่องมาพร้อมกับฟอนต์ที่ติดตั้งไว้ล่วงหน้า ซึ่งถือว่าปลอดภัยสำหรับเว็บ ปลอดภัยที่จะใช้เพราะมีโอกาสที่ดี จริงๆ ที่สมาชิกของคุณจะได้รับเช่นกัน

ข้อเสียคือมีแบบอักษรที่ปลอดภัยสำหรับเว็บจำนวนจำกัดเมื่อเทียบกับแบบอักษรของเว็บ และมักใช้บ่อย ดังนั้นคุณจึงไม่ค่อยโดดเด่น (หากนั่นคือสิ่งที่คุณต้องการ)

แบบอักษรที่ปลอดภัยสำหรับเว็บที่ชัดเจนคือ:

Arial
Helvetica
เวอร์ดานา
จอร์เจีย
Times New Roman

แต่มีอีกหลายอย่างที่คุณสามารถใช้ได้ด้วยความมั่นใจในระดับหนึ่ง ดังนั้น ให้แยกส่วนแบบอักษร Arial หรือ Helvetica มาตรฐานออก และค้นหาแบบอักษรที่ปลอดภัยสำหรับเว็บที่เหมาะกับแบรนด์ของคุณ

แหล่งข้อมูลที่ดีที่สุดที่ฉันพบสำหรับแบบอักษรที่ปลอดภัยสำหรับเว็บคือแบบอักษร CSS ฉันชอบที่พวกเขารวมเปอร์เซ็นต์การใช้งานสำหรับพีซีและ Mac สำหรับแต่ละแบบอักษร ดังนั้นคุณจะทราบจำนวนสมาชิกของคุณที่อาจเห็นแบบอักษรที่คุณต้องการโดยประมาณและจำนวนที่จะเห็นตัวเลือกสำรองของคุณแทน

แบบอักษรเว็บ

แบบอักษรของเว็บถูกดึงมาจากเซิร์ฟเวอร์—ไม่ว่าคุณจะโฮสต์เองหรือจากภายนอก (เช่น Google หรือ Adobe) ด้วยเหตุนี้ แบบอักษรที่หลากหลายที่สามารถใช้ได้จึงมีขนาดใหญ่กว่ามาก และสามารถใช้กับคอมพิวเตอร์เครื่องใดก็ได้... ตราบใดที่เบราว์เซอร์หรือโปรแกรมรับส่งเมลสามารถดึงแบบอักษรนั้นเข้ามาได้ ในบางกรณี สมาชิกของคุณอาจมีเว็บอยู่แล้ว ดาวน์โหลดและติดตั้งฟอนต์ในเครื่อง ดังนั้นฟอนต์เหล่านี้จะใช้งานได้แม้ในโปรแกรมรับส่งเมลที่ไม่รองรับฟอนต์ของเว็บ!

ดังนั้นแม้ว่าแบบอักษรของเว็บจะมอบความหลากหลายและอิสระในการสร้างสรรค์ให้กับคุณมากขึ้น แต่ก็มีค่าใช้จ่าย: การสนับสนุนไคลเอ็นต์อีเมลที่จำกัด (ซึ่งฉันเจาะลึกลงไปอีก)

ทำไมต้องใช้แบบอักษรเว็บ

คุณอาจสงสัยว่าทำไมต้องกังวลกับแบบอักษรของเว็บเลย? ในฐานะนักการตลาดและนักออกแบบ คุณทราบดีถึงแรงกดดันในการคงไว้ซึ่งแบรนด์ในอีเมลด้วยสีสัน การออกแบบ และ—ใช่—วิชาการพิมพ์ แบบอักษรเว็บช่วยให้คุณอวดแบรนด์ของคุณได้โดยไม่ต้องพึ่งพารูปภาพสำหรับข้อความของคุณ

การล็อกสำเนาสำคัญในรูปภาพเป็นแนวทางปฏิบัติมาตรฐานในการออกแบบอีเมลเพื่อรักษาแบรนด์และความคิดสร้างสรรค์ แต่การ "ซ่อน" ข้อความในรูปภาพจะจำกัดการเข้าถึงอีเมล เนื่องจากโปรแกรมอ่านหน้าจอไม่สามารถอ่านข้อความบนรูปภาพได้

ตัวอย่างอีเมล Ace Hardware ของแบบอักษรเว็บที่มีและไม่มีรูปภาพ — อีเมลที่มีและไม่มีรูปภาพเมื่อใช้แบบอักษรเว็บ

ตัวอย่างอีเมล Magic Spoon ของแบบอักษรเว็บที่มีและไม่มีรูปภาพ — อีเมลที่มีและไม่มีรูปภาพเมื่อใช้ข้อความในภาพ

และการมีข้อความในภาพของคุณทำร้ายประสบการณ์ของสมาชิกหากพวกเขาปิดรูปภาพโดยค่าเริ่มต้น นี่อาจไม่ใช่สมาชิกส่วนใหญ่ของคุณ แต่ไม่มีทางรู้จริงๆ ว่ามีใครปิดรูปภาพของพวกเขาและเปิดอีเมลของคุณ เหตุใดจึงไม่ให้ประสบการณ์ที่ดีที่สุดแก่ผู้ชมในวงกว้างที่สุดเท่าที่จะทำได้

แบบอักษรเว็บเปิดหนทางใหม่แห่งความคิดสร้างสรรค์ในการพิมพ์ ทำให้นักออกแบบอีเมลมีความคิดสร้างสรรค์และเข้าถึงได้ และยึดมั่นในรูปลักษณ์และความรู้สึกของแบรนด์

ฉันสามารถใช้แบบอักษรเว็บในอีเมลได้หรือไม่

หากคุณยังไม่ได้เดา คำตอบคือใช่! แต่—เช่นเดียวกับอีเมลทั้งหมด—มีข้อควรระวัง

การสนับสนุนไคลเอนต์อีเมล

แบบอักษรของเว็บใช้งานได้ในไคลเอนต์อีเมลบางตัวเท่านั้น และต้องใช้ความระมัดระวังเพื่อให้แน่ใจว่าแบบอักษรจะไม่ได้รับการสนับสนุนในที่ใด แบบอักษรจะถอยกลับอย่างงดงาม

ไคลเอนต์อีเมล	รองรับแบบอักษรเว็บ
แอปเปิ้ลเมล	✓ ใช่
Outlook 2007-2016	✘ ไม่
Outlook 2019	✘ ไม่*
Outlook สำหรับ Mac	✓ ใช่
Outlook Office 365	✘ ไม่*
แอป Gmail	✘ ไม่*
iOS	✓ ใช่
แอพ Outlook	✘ ไม่
ซัมซุงเมล	✘ ไม่*
AOL Mail	✘ ไม่
Gmail	✘ ไม่*
Office 365	✘ ไม่
Outlook.com	✘ ไม่
ยาฮู! จดหมาย	✘ ไม่

*มีผลลัพธ์ที่ไม่แน่นอนขึ้นอยู่กับวิธีการฝังอีเมล พูดคุยในภายหลัง

การดูฐานสมาชิกของคุณเป็นเรื่องที่คุ้มค่า เพื่อดูว่ามีกี่คนที่ดูอีเมลของคุณในโปรแกรมรับส่งเมลที่สนับสนุนแบบอักษรของเว็บ หากผู้ติดตามของคุณมีเพียงพอ ก็เป็นวิธีที่ยอดเยี่ยมในการเพิ่มอีเมลของคุณ

หากส่วนใหญ่ไม่เป็นเช่นนั้น ก็ไม่คุ้มกับเวลาและความพยายามของคุณ โดยเฉพาะอย่างยิ่งหากคุณกำลังพิจารณาใช้แบบอักษรเว็บแบบชำระเงิน

ไคลเอนต์อีเมลใดที่สมาชิก ของคุณ ใช้

ค้นหาว่าสมาชิกของคุณเปิดอีเมลของคุณที่ไหนและมีส่วนร่วมอย่างไร ด้วย Litmus Email Analytics รับข้อมูลเชิงลึกที่คุณต้องการเพื่อเพิ่มประสิทธิภาพอีเมลและอื่นๆ

เรียนรู้เพิ่มเติม →

ใบอนุญาต

แบบอักษรของเว็บแต่เดิมออกแบบมาเพื่อใช้บนเว็บไซต์เท่านั้น ดังนั้นโดยทั่วไปการอนุญาตให้ใช้สิทธิจะใช้ได้เฉพาะบนเว็บไซต์และแอปพลิเคชันมือถือเท่านั้น เหตุผลที่บริการเว็บฟอนต์จำนวนมากไม่อนุญาตให้ใช้ในอีเมล เนื่องจากถูกมองว่าเป็นการกระจายฟอนต์ ซึ่งขัดกับข้อตกลงสิทธิ์การใช้งานสำหรับผู้ใช้ปลายทาง (EULA) ของบริการจำนวนมาก

ผู้ให้บริการแบบอักษรเว็บทั้งหมดที่เราติดต่อได้รับการสนับสนุนโดยใช้แบบอักษรของตนในอีเมล ผู้ให้บริการแต่ละรายมีใบอนุญาตที่แตกต่างกันซึ่งจำเป็น ดังนั้นจึงไม่มีสิทธิ์ใช้งานแบบอักษรมาตรฐานในอีเมล หากคุณต้องการใช้แบบอักษร โปรดติดต่อบริษัทเพื่อสอบถามว่าพวกเขาให้สิทธิ์ใช้งานแบบอักษรอย่างไร

จะหาแบบอักษรเว็บได้ที่ไหน

ดังนั้น คุณจึงได้ไตร่ตรองทุกอย่างแล้ว และตัดสินใจว่าคุณต้องการใช้แบบอักษรของเว็บ ด้วยตัวเลือกที่ดูเหมือนไม่มีที่สิ้นสุด คุณสามารถค้นหาตัวเลือกที่เหมาะกับแบรนด์ของคุณได้ แต่สิ่งสำคัญคือต้องคำนึงถึงการช่วยสำหรับการเข้าถึง

แบบอักษรบางตัวอ่านได้ง่ายกว่าแบบอื่น

แบบอักษรที่หรูหราหรือตกแต่ง เช่น แบบอักษรดิสเพลย์หรือแบบอักษรลายมือ อาจทำให้ผู้ที่มีความบกพร่องทางสายตาหรือผู้ที่มีความบกพร่องทางการเรียนรู้แยกแยะความแตกต่างระหว่างรูปร่างของตัวอักษรได้ยาก ฟอนต์ Sans-serif (ฟอนต์ที่ไม่มีคุณสมบัติเพิ่มเติมหรือลอนในตัวอักษร เช่น Arial, Calibri, Century Gothic หรือ Helvetica) และฟอนต์ slab (ฟอนต์ที่มีเส้นหนากว่า เช่น Museo Slab และ Rockwell) จะถือว่าเข้าถึงได้ง่ายกว่า

ต่อไปนี้เป็นสถานที่ที่ดีในการเริ่มมองหา

Google Fonts

มีบริการแบบอักษรเว็บมากมาย แต่ Google Fonts เป็นรายการโปรดของเรา บริการนี้ฟรีทั้งหมด และคุณสามารถดาวน์โหลดแบบอักษรของเว็บไปยังคอมพิวเตอร์ของคุณได้ หากคุณกำลังจำลองการออกแบบใน Adobe Photoshop, Sketch หรือซอฟต์แวร์การออกแบบอื่นๆ

Adobe Fonts

Typekit ได้กลายเป็น Adobe Fonts เมื่อเดือนตุลาคม 2018 ตอนนี้รองรับทั้ง <link> และวิธี @import สำหรับการใช้ฟอนต์เป็นฟอนต์ของเว็บ (เพิ่มเติมในครั้งต่อไป) บริการนี้ไม่ฟรีโดยสมบูรณ์ แต่ถ้าคุณมีการสมัครรับข้อมูล Creative Cloud อยู่แล้ว ก็รวมอยู่ด้วย

บริการแบบอักษรเว็บ

มีบริการฟอนต์เว็บอื่น ๆ อีกหลายบริการแบบชำระเงิน คุณจะต้องตรวจสอบให้แน่ใจว่าคุณได้รับใบอนุญาตที่ถูกต้องเพื่อใช้ในอีเมลของคุณ

ประเภทเครือข่าย (ใบอนุญาตเว็บ)
ประเภทกระบวนการ Foundry (ใบอนุญาตเว็บ)
Optimo (ใบอนุญาตโฆษณาดิจิทัล)
Fontspring (ใบอนุญาตอีเมลแบบกำหนดเอง)
Typotheque (ใบอนุญาตเว็บ)
ประเภทการผลิต (ใบอนุญาตโฆษณาออนไลน์)
MyFonts (ใบอนุญาตเว็บ)
ประเภทการค้า (ใบอนุญาตเว็บ)

ด้วยสิทธิ์ใช้งานเว็บ อาจมีตัวเลือกในการโฮสต์ฟอนต์เองหรือโฮสต์ฟอนต์นั้นโดยผู้ให้บริการ ในใบอนุญาตใช้งานเว็บบางรายการ คุณจะต้องจ่ายเงินสำหรับการดูหน้าเว็บจำนวนหนึ่งกับอีเมลแต่ละฉบับที่โหลดแบบอักษรนับเป็นการดูหน้าเว็บ ดังนั้นโปรดคำนึงถึงเรื่องนี้ด้วยเมื่อคุณซื้อใบอนุญาต

วิธีฝังฟอนต์เว็บในอีเมล

เนื่องจากโดยทั่วไปแล้วแบบอักษรของเว็บจะไม่พบในอุปกรณ์ของผู้อื่นและโฮสต์ที่อื่นแทน คุณต้อง "ฝัง" หรือนำเข้าแบบอักษรของเว็บลงในอีเมลของคุณก่อนจึงจะสามารถใช้งานได้จริง

1. รับ URL ของไฟล์ฟอนต์ของคุณ

คุณจะต้องใช้ URL ของแบบอักษรเว็บเพื่อเรียกมันลงในอีเมลของคุณ บริการแบบอักษรเว็บของคุณควรมี URL นี้ แต่ถ้าคุณโฮสต์ไฟล์ฟอนต์ด้วยตัวเอง ให้หา URL ที่ฟอนต์ของเว็บวางอยู่บนเซิร์ฟเวอร์ของคุณ ตรวจสอบให้แน่ใจว่าเป็น URL สาธารณะและไม่ได้มาจากเซิร์ฟเวอร์ในเครื่อง มิฉะนั้น สมาชิกของคุณจะไม่สามารถเข้าถึงแบบอักษรของเว็บได้และจะเห็นแบบอักษรสำรองแทน

หากคุณใช้ Google Fonts การค้นหา URL นั้นค่อนข้างยุ่งยาก แต่ก็ไม่ยากเกินไป ดูวิธีการในขั้นตอนต่อไปสำหรับวิธีการฝัง @font-face

2. นำเข้าแบบอักษรของเว็บโดยใช้หนึ่งในสามวิธี

มีสามวิธีในการฝังแบบอักษรของเว็บในอีเมล (และข้อแม้ที่อาจจำกัดวิธีการที่คุณสามารถใช้ได้) สามวิธีในการฝังฟอนต์ของคุณคือ:

<link>
@นำเข้า
@font-face

เหตุใดคุณจึงเลือกวิธีหนึ่งมากกว่าวิธีอื่น

เมธอด @import ชะลอการโหลดฟอนต์เว็บที่นำเข้า จนกว่า HTML ที่ฝังไว้จะถูกโหลดจนเต็ม การทำเช่นนี้อาจทำให้แบบอักษรเว็บใช้เวลานานขึ้นเล็กน้อยจึงจะปรากฏในอีเมลของคุณ ขณะที่โหลดอีเมลที่เหลือ ในทางกลับกัน วิธี <link> จะโหลดทรัพยากรแบบอินไลน์เมื่ออ่านโค้ดของไฟล์ HTML (จากบนลงล่าง) ซึ่งอาจทำให้การโหลดอีเมลของคุณล่าช้า หากไฟล์ฟอนต์ของเว็บมีขนาดใหญ่เป็นพิเศษ

อีกสิ่งหนึ่งที่ควรคำนึงถึงเมื่อเลือกวิธีการใช้คือสิ่งที่ ESP ของคุณรองรับ

คุณสามารถสร้างโค้ดที่สวยงามซึ่งใช้งานได้ใน Litmus ตลอดทั้งวัน แต่ถ้า ESP ของคุณเปลี่ยนโค้ดอย่างที่เราทราบดีอยู่แล้วว่าส่วนใหญ่ทำ คุณก็ไม่ต้องทำอะไรเลย ตรวจสอบให้แน่ใจว่า ESP ของคุณไม่เปลี่ยนรหัสในลักษณะที่จะทำให้แบบอักษรของคุณหยุดทำงาน ที่ Litmus ESP ของเราไม่อนุญาตให้เรารวมเงื่อนไข MSO รอบองค์ประกอบสไตล์ ดังนั้น <link> และวิธี @import จะไม่ทำงานสำหรับเรา เนื่องจากไม่ได้รับการสนับสนุนอย่างดีใน Outlook ซึ่งเราจะพูดถึงต่อไปด้านล่าง

การใช้ <link>

การใช้เมธอด <link> เป็นวิธีที่ค่อนข้างง่ายในการฝังฟอนต์ในอีเมลของคุณ วางโค้ดบรรทัดนี้ใน <head> ของอีเมลใกล้ด้านบน:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

ใช้ @import

วิธี @import ก็เป็นวิธีการที่ค่อนข้างง่ายเช่นกัน วางโค้ดบรรทัดนี้ใน <head> ของอีเมลของคุณระหว่างแท็ก <style>:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

ใช้ @font-face

บริการฟอนต์เว็บออนไลน์มักมีรูปแบบไฟล์ให้เลือกห้ารูปแบบ: .eot, .woff, .woff2, .svg และ .ttf รูปแบบ .woff และ .woff2 รองรับอีเมลได้ดีที่สุด เราจึงขอแนะนำให้ใช้รูปแบบใดรูปแบบหนึ่งหรือทั้งสองรูปแบบเหล่านี้เมื่อทำได้ วิธี @ font-face เป็นวิธีเดียวที่ให้คุณเลือกรูปแบบไฟล์ที่ต้องการนำเข้าโดยเฉพาะ ทำให้เป็นวิธีเดียวที่กันกระสุนได้มากที่สุดสำหรับการนำแบบอักษรของเว็บไปใช้

นี่คือการประกาศ @font-face ทั่วไปสำหรับการนำเข้าแบบอักษรของเว็บไปยังอีเมลโดยใช้ Google Fonts เป็นบริการแบบอักษรบนเว็บที่เราเลือก:

@font-face {
  	font-family: 'Roboto';
  	font-style: normal;
  	font-weight: 400;
  	src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
	}

หากคุณใช้ Google Fonts การค้นหา @font-face code ไม่ใช่เรื่องง่าย แต่ก็ไม่ได้ยากเกินไป

ขั้นแรก คุณต้องค้นหาแบบอักษรที่คุณต้องการใช้บน Google Font จากนั้นเลือกสไตล์ที่คุณต้องการใช้ เมนูลอยจะปรากฏขึ้นทางด้านขวา

googe_fonts

ในเมนูลอยจะมีตัวเลือกสำหรับ <link> หรือ @import ทั้งสองอย่างนี้จะมี URL (เน้นอยู่ในภาพหน้าจอด้านบน) คุณสามารถคัดลอก URL นั้นแล้ววางลงในแถบที่อยู่ของเบราว์เซอร์เพื่อค้นหาสไตล์ชีต CSS ที่ Google ใช้

google_font_api

คัดลอกและวาง @font-face เวอร์ชัน 'ละติน' ระหว่างแท็ก <style> ของคุณ

ที่ Litmus วิธี @ font-face คือการนำแบบอักษรเว็บเข้าสู่อีเมลของเรา

เครดิตทั้งหมดสำหรับวิธีการนำเข้าแบบอักษรของเว็บนี้จะมอบให้ Paul Airy ผู้สนับสนุนการช่วยสำหรับการเข้าถึงอีเมล ดังรายละเอียดในจดหมายข่าว Type: E ที่ผ่านมา

3. เลือกแบบอักษรสำรองที่เหมาะสม

เมื่อใช้แบบอักษรของเว็บ จำเป็นต้องมีแบบอักษรที่ปลอดภัยสำหรับเว็บสำรองสำหรับไคลเอ็นต์อีเมลที่ไม่สนับสนุนแบบอักษรของเว็บ

ไคลเอนต์อีเมลแต่ละรายมีฟอนต์เริ่มต้น ถ้าฟอนต์ที่แสดงในสแต็กตระกูลฟอนต์ไม่พร้อมใช้งาน ตัวอย่างเช่น Gmail ใช้ Arial, Apple Mail ใช้ Helvetica และ Outlook ใช้ Times New Roman หากคุณไม่ชอบเสียงของฟอนต์เริ่มต้นเหล่านี้ เรามีข่าวดีมาบอก—คุณสามารถเลือกฟอนต์สำรองได้เมื่อคุณเขียนโค้ดในกลุ่มฟอนต์แฟมิลี่ (ในขั้นตอนต่อไป)

การเลือกแบบอักษรสำรองที่เหมาะสมซึ่งคงไว้ซึ่งการออกแบบอีเมลของคุณเป็นกุญแจสำคัญในการมอบประสบการณ์ที่ยอดเยี่ยมให้กับสมาชิกของคุณทุกคน ไม่ว่าพวกเขาจะใช้โปรแกรมรับส่งเมลใด

ฟอนต์สำรองควรเป็นประเภทเดียวกับฟอนต์เว็บ—ใช้ฟอนต์สำรอง sans-serif ถ้าฟอนต์เว็บของคุณเป็นฟอนต์ sans-serif และฟอนต์ serif fallback ถ้าฟอนต์เว็บของคุณเป็นฟอนต์ serif ด้วย การใช้แบบอักษรแบบเดียวกันจะช่วยรักษาการออกแบบอีเมลของคุณในไคลเอนต์อีเมลต่างๆ

คุณสามารถก้าวไปอีกขั้นได้ด้วยการวิเคราะห์ความสูง x ของแบบอักษร

ความสูง x คือความสูงแนวตั้งของแบบอักษร ตามหลักการแล้ว คุณควรเลือกฟอนต์สำรองที่มีความสูง x ใกล้เคียงกัน เพื่อป้องกันไม่ให้การออกแบบอีเมลของคุณพังเมื่อมีการใช้งานฟอนต์สำรอง

ตัวอย่างความสูง x เปรียบเทียบ verdana, arial และ proxima nova

ต่อไปนี้คือตัวอย่างความแตกต่างเล็กน้อยของความสูง x ระหว่างแบบอักษร Verdana, Arial และแบบอักษรเว็บ Proxima Nova ความแตกต่างเล็กๆ น้อยๆ เหล่านี้สามารถสร้างความแตกต่างในการสร้างหรือทำลายการออกแบบอีเมลของคุณเมื่อไม่ได้แสดงแบบอักษรของเว็บ

4. ใช้แบบอักษรของคุณในอีเมล

เมื่อนำเข้าแบบอักษรของเว็บและเลือกทางเลือกแล้ว การใช้แบบอักษรเหล่านี้ในอีเมลจะง่ายดายเหมือนกับการใช้แบบอักษรที่ปลอดภัยสำหรับเว็บ เพียงใช้ชื่อฟอนต์-ตระกูลที่กำหนดไว้ในวิธีการนำเข้าตามด้วยฟอนต์ทางเลือกของคุณในอินไลน์ CSS หรือในส่วนหัว:

font-family: 'Roboto', Verdana, sans-serif;

คิดว่านี่เป็นรายการลำดับความสำคัญของแบบอักษรที่ต้องการ หากโปรแกรมรับส่งเมลไม่สามารถปฏิบัติตามตัวเลือกอันดับหนึ่งของคุณได้ โปรแกรมจะกลับไปใช้ตัวเลือกถัดไปในรายการของคุณ

ตัวอย่างเช่น เมื่อใช้กลุ่มแบบอักษรด้านบน Gmail จะไม่สนใจแบบอักษรแรกในรายการ เนื่องจากเป็นแบบอักษรเว็บที่ Gmail ไม่รองรับ ดังนั้นแบบอักษรที่แสดงจะเป็น Verdana หาก Verdana ไม่ได้รับการสนับสนุนบนอุปกรณ์ที่ใช้ (ซึ่งจะหายากมากเนื่องจาก Verdana เป็นแบบอักษรที่ปลอดภัยสำหรับเว็บ) อุปกรณ์จะใช้แบบอักษร sans-serif เริ่มต้นสำหรับระบบ เนื่องจากเป็นแบบอักษรที่สามในรายการ

5. หลีกเลี่ยงตัวหนา faux หรือตัวเอียง faux

หากคุณมีไฟล์ฟอนต์เว็บเวอร์ชันตัวหนาและตัวเอียง มาใช้งานกัน!

นักออกแบบตัวอักษรได้ใส่จำนวนมากของความคิดและความพยายามในการได้รับทุกรูปแบบที่แตกต่างกันของตัวอักษรเพียงขวาเพื่อให้การปฏิบัติเป็นของดีที่สุดที่จะนำไปใช้ในการออกแบบประเภทเดิมแทนที่จะปล่อยให้ไคลเอนต์อีเมลหรือเบราว์เซอร์ส่งเดชใช้ตัวหนาลูกอ๊อดหรือลูกอ๊อดตัวเอียง แบบอักษรปกติ

โดยพื้นฐานแล้ว อย่าทำสิ่งนี้:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}
style="font-family: 'Roboto', Verdana, sans-serif; font-weight: bold; font-style: italic;"

เช่นเดียวกับการออกแบบเว็บ คุณสามารถดึงฟอนต์ของแท้โดยใส่สไตล์เหล่านี้ไว้ใน @font-face stack ของคุณ เช่น:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto-Italic'), 
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1Mu51xIIzIXKMny.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto-Bold'), 
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto-BoldItalic'),   src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2');
}

อย่างที่คุณเห็น สไตล์ต่างๆ จะดึงฟอนต์ที่แตกต่างกันออกไปโดยไม่คำนึงถึงตระกูลฟอนต์ ด้วยวิธีนี้ หากคุณจัดรูปแบบฟอนต์ของคุณใน HTML ดังนี้:

style="font-family: 'Roboto', Verdana, sans-serif; font-weight: bold; font-style: italic;"

…จากนั้นก็จะดึงฟอนต์ 'Roboto-BoldItalic' ของแท้มา ใช้ ! ในทำนองเดียวกัน แค่เพิ่ม font-weight: bold; จะดึง 'Roboto-Bold' และเพียงแค่เพิ่ม รูปแบบตัวอักษร: ตัวเอียง; จะดึง 'Roboto-Italic'

อย่าทำเช่นนี้เช่นกัน!

ดังนั้น คุณอาจสงสัยว่า—ทำไมจึงทำเช่นนี้แทนที่จะประกาศชุดฟอนต์ที่แตกต่างกันสำหรับแต่ละสไตล์ ซึ่งดึงฟอนต์ของแท้มาด้วย นี่คือลักษณะที่ปรากฏ:

@font-face {
font-family: 'Roboto Bold Italic';
src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2');
}
style="font-family: 'Roboto Bold Italic', Verdana, sans-serif;"

สิ่งนี้นำเสนอปัญหา การใช้ชื่อกลุ่มแบบอักษรเพื่อจัดเก็บสไตล์ไม่เพียงแต่สร้าง CSS ที่ซับซ้อนมากเกินไปและซ้ำซ้อน แต่ยังตัดข้อความของการจัดสไตล์หากคุณใช้ทางเลือกอื่น ตัวอย่างเช่น หากคุณกำลังดูโค้ดด้านบนใน Gmail (ซึ่ง ไม่ ไม่ สนับสนุนแบบอักษรเว็บที่กำหนดเอง) จากนั้นคุณจะเห็น Verdana ที่ ไม่เป็นตัวหนาและไม่เป็นตัวเอียงแทน Roboto Bold Italic

การแยกกลุ่มแบบอักษรและน้ำหนักแบบอักษรหรือรูปแบบแบบอักษรออกจากกัน แบบอักษรสำรองจะยังคงมีรูปแบบที่ถูกต้อง

6. ใช้โปรแกรมแก้ไขสำหรับ Outlook

Outlook มีมุมแหลมที่ยอดเยี่ยมที่คุณต้องระวัง โดยเฉพาะอย่างยิ่งหากนั่นคือสิ่งที่สมาชิกของคุณใช้

ดูหน้าตาอีเมลของคุณใน Outlook และอื่นๆ

ไคลเอนต์อีเมลทุกรายมีนิสัยใจคอ โชคดีที่คุณสามารถเห็นพวกเขาในอีเมลของคุณก่อนที่คุณจะกดส่ง—ด้วย Litmus Email Previews ไม่มีอีเมลเสียอีกต่อไป

เรียนรู้วิธีการ →

ถ้าคุณใช้เมธอด <link> หรือ @import ทุกอย่างก่อน Outlook 2019 จะแสดง Times New Roman ไม่ ว่าคุณจะใส่ทางเลือกใดสำหรับฟอนต์ของคุณ

วิธีแก้ไขที่ง่ายที่สุดคือการใช้วิธี @font-face แต่ถ้าคุณจำเป็นต้องใช้เมธอด <link> หรือ @import ให้ใช้เงื่อนไขของ Microsoft Office (MSO) เพื่อแสดงความคิดเห็นในส่วนนั้นของสไตล์ของคุณ วิธีนี้จะป้องกันไม่ให้ Outlook มองเห็น และจะใช้ฟอนต์สำรองตามที่ตั้งใจไว้:

ไม่มีเงื่อนไข MSO	ด้วยเงื่อนไข MSO
`<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">`	`<!--[if (gte mso 9)\|(IE)]><!--> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <!--<![endif]-->`

แต่รอสักครู่ ฉันเพิ่งพูดไปทุกอย่าง ก่อน Outlook 2019 แล้วจะเกิดอะไรขึ้นใน Outlook 2019 (และ Outlook Office 365) ในไคลเอนต์อีเมลเหล่านั้น Outlook จะกลับไปใช้ทางเลือกของคุณแม้จะไม่มีเงื่อนไข MSO

ไม่มีเงื่อนไข MSO	ด้วยเงื่อนไข MSO
`< link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">`	`<!--[if (gte mso 9)\|(IE)]><!--> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <!--<![endif]-->`

อันที่จริงแล้ว ในไคลเอนต์เหล่านั้น @import ดูเหมือนจะใช้งานได้จริง! แต่มันจริงเหรอ? เราลองใช้แบบอักษรอื่นแล้ว และผลลัพธ์ก็ใกล้เคียงกับสิ่งที่คุณคาดหวังจาก Outlook:

ทดสอบฟอนต์เว็บใน outlook

ดูเหมือนว่าบางครั้งจะใส่แบบอักษรของระบบแทนแบบอักษรที่คุณระบุ และในกรณีของมอนต์เซอร์รัต ฉันไม่ค่อยแน่ใจว่าเกิดอะไรขึ้นที่นั่น แต่นั่นไม่ใช่มอนต์เซอร์รัต จริงๆแล้วดูเหมือน Lato มากกว่า ดูเหมือนว่า Outlook จะพยายามสนับสนุนแบบอักษรของเว็บ แต่ก็ยังไม่ปรากฏ เป็นสิ่งที่ควรจับตามองในอนาคตอย่างแน่นอน

ในระหว่างนี้ ด้วยเหตุผลข้างต้น และเนื่องจากคุณไม่สามารถกำหนดเป้าหมายเฉพาะ Outlook 2019 ได้ จึงควรใช้ @font-face หรือซ่อนการประกาศ <link> หรือ @import ของคุณ

หากคุณพบว่า Outlook กำลังแปลงแบบอักษรของคุณเป็น Times New Roman คุณสามารถเพิ่ม mso-font-alt: 'Arial'; ไปที่บล็อก @ font-face เพื่อจัดเตรียมทางเลือกสำรองสำหรับ Outlook:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  mso-font-alt: 'Arial';
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}

อีกวิธีหนึ่งที่คุณสามารถใช้ได้คือการเข้ารหัสตระกูลฟอนต์ด้วยสแต็กฟอนต์ที่ปลอดภัยบนเว็บแบบอินไลน์และรวมบล็อก <style> เพื่อแทนที่ฟอนต์ด้วยฟอนต์เว็บ จากนั้นก็แค่ซ่อนบล็อกสไตล์นั้นจาก Outlook:

<!--[if (gte mso 9)|(IE)]><!-->
 p, h1, h2, h3, h4 { font-family: 'Roboto', Verdana, Helvetica, sans-serif !important; }
<!--<![endif]-->
style="font-family: Verdana, Helvetica, sans-serif;"

7. ใช้การแก้ไขสำหรับ Gmail เช่นกัน (ล้อเล่นไม่มี)

คุณอาจสงสัยว่า “แล้ว Gmail ล่ะ? เรา กำลัง ใช้ Google Fonts อยู่”

คุณคิดว่าเนื่องจาก Gmail เป็นผลิตภัณฑ์ของ Google และ Google Fonts เป็นผลิตภัณฑ์ของ Google พวกเขาจึงเข้ากันได้ดี แต่อนิจจานั่นไม่ใช่กรณี

แบบอักษรเว็บไม่ทำงานใน Gmail แม้ว่าจะเป็นแบบอักษรของ Google และแม้ว่าคุณจะใช้รหัสที่ Google ให้มาก็ตาม ข้อยกเว้นประการหนึ่งสำหรับสิ่งนี้คือ Roboto:

การใช้แบบอักษร Google ต่างๆ	ใช้วิธีฝังแบบต่างๆ

และที่จริงแล้วบนแอป Gmail Mail บน Android ฟอนต์ sans-serif ทั้งหมดจะถอยกลับไปเป็น Roboto:

การใช้แบบอักษร Google ต่างๆ	ใช้วิธีการฝังที่แตกต่างกัน

แรงบันดาลใจบางอย่างที่จะช่วยให้คุณเริ่มต้น

เอาล่ะ ตอนนี้ใครพร้อมที่จะดูตัวอย่างเจ๋งๆ ของแบรนด์ต่างๆ ที่ใช้แบบอักษรเว็บในอีเมลอย่างถูกวิธีแล้วบ้าง

Ace Hardware ใช้แบบอักษรเว็บที่รองรับ แต่เลือก Rockwell เป็นแบบอักษรสำรองเพื่อให้แน่ใจว่าอีเมลยังคงดูแบรนด์ในไคลเอนต์อีเมลอื่น

ด้วยแบบอักษรเว็บ	กับทางเลือกอื่น

Webflow ใช้แบบอักษรของระบบเป็นทางเลือกสำหรับแบบอักษรของเว็บ และใช้น้ำหนักแบบอักษรเพื่อให้แน่ใจว่าได้รับประสบการณ์การพิมพ์ที่ยอดเยี่ยมไม่ว่าแบบอักษรใดจะปรากฏขึ้น

อีเมลเว็บโฟลว์

อยู่ในแบรนด์และปราศจากข้อผิดพลาด

แบบอักษรของเว็บเป็นวิธีที่ยอดเยี่ยมในการทำให้ข้อความในอีเมลของคุณมีแบรนด์และสามารถเข้าถึงได้ แต่อย่างที่คุณเห็นจากโพสต์นี้ มีความแตกต่างมากมายที่ต้องพิจารณา จึงมีความสำคัญไม่แพ้กัน...

ทำการทดสอบเสมอ!

เราได้พยายามอย่างเต็มที่เพื่อทดสอบสถานการณ์ต่างๆ มากมาย แต่ ESP ของคุณอาจบิดเบือนโค้ดของคุณในแบบที่ไม่คาดคิด ตรวจสอบให้แน่ใจว่าได้ทดสอบอีเมลของคุณก่อนที่จะส่งออกเพื่อให้แน่ใจว่าทางเลือกอื่นของคุณทำงานอย่างถูกต้อง

QA ทดสอบฟอนต์เว็บในอีเมลของคุณ

คุณทำมันถูกต้องหรือไม่? ค้นหาด้วยการทดลองใช้สารสีน้ำเงินฟรี ดูตัวอย่างลักษณะอีเมลของคุณในไคลเอนต์อีเมล แอป และอุปกรณ์กว่า 90 รายการ และรักษาชื่อเสียงแบรนด์ของคุณด้วยอีเมลที่ไร้ที่ติ

เริ่มการทดลองใช้สารสีน้ำเงินฟรี →

การเพิ่มแบบอักษรของเว็บนั้นคุ้มค่าเพราะเป็นการเพิ่มประสิทธิภาพที่ก้าวหน้าอย่างมากเพื่อช่วยให้คุณมอบประสบการณ์ที่ดีที่สุดให้กับสมาชิกของคุณในกล่องจดหมายของพวกเขา มีความสุข! และแจ้งให้เราทราบหากคุณมีคำถามหรือความคิดเห็นด้านล่าง

เผยแพร่ครั้งแรกเมื่อวันที่ 11 เมษายน 2019 โดย Jaina Mistry ปรับปรุงล่าสุด 23 เมษายน 2021