การใช้ Web font ใน Email

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

การทำ Web font ให้อีเมลก็เป็นอีกทางเลือกหนึ่ง ข้อดีคือตัวอักษรก็จะคมชัดกว่าตัวอักษรที่ทำเป็นรูป แก้ไขง่าย เวลาเปลี่ยนแปลง text ก็ไม่ต้องไปทำรูปมาใหม่
อีกทั้งก็ยังช่วยลด Loading time แต่มันก็ขึ้นอยู่กับ จำนวน Web font ที่เราใช้ในอีเมลนะ ถ้าเรียกใช้เยอะก็โหลดนานอยู่ ข้อดีก็มี ข้อเสียก็มีบ้าง
อยากใช้ก็อยากใช้ แต่มันมีข้อจำกัดในแต่ละ Email clients

ปกติใน Email clients จะมี Font default ไม่เหมือนกัน

Apple mail ใช้ Helvetica
Gmail ใช้ Arial
Outlook 2016 ใช้ Calibri

วิธีการเพิ่ม Web font ในอีเมล โดยใช้ Web font จาก Google Fonts

1. วิธี import

เลือก font ที่ต้องการ แล้ว copy code ในแท็บ @import ไปวางใน <head> ของเราเลย ในที่นี้เราเลือก font ชื่อว่า Pacifico

<style>
   @import url('https://fonts.googleapis.com/css?family=Pacifico');
</style>
เลือก Web font จาก Google font แล้ว copy code ไปไว้ใน

2. วิธีใช้ <link>

เลือก font ที่ต้องการ แล้วคลิกที่แท็บ Standard แล้ว copy code ไปวางไว้ใน <head> เหมือนกับวิธี import แต่วิธีใช้ <link> จะดีกว่าวิธี import เพราะ import จะรอให้ HTML ทั้งหมดโหลดเสร็จก่อน ส่วน <link> จะเรียกมาโดยเรียงการอ่านแบบ HTML จากบนลงล่าง แต่ว่าก็อาจจะใช้เวลาโหลดนาน ถ้าขนาดของ Web font ที่เราเรียกมามีขนาดใหญ่

<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

3.  วิธีใช้  @fontface

เวลาเรา generate web font เว็บไซต์ทำ Web font ก็จะเตรียม font format มาให้ ได้แก่ .eot, .woff, .woff2, .svg และ .ttf ซึ่งจริงๆ .woff  เป็น fotmat ที่ดีที่สุดในการใช้ในอีเมล

เมื่อเรา generate font face มาแล้ว เราก็ copy การประกาศ @font-face ไปไว้ใน <style>  เพื่อที่เราจะเรียกใช้ Web font ได้

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6D6MmTpA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

 

ไม่ว่าจะเลือกใช้วิธีอะไร import, <link> หรือ @fontface เวลาประกาศ Web font ที่เราจะใช้แล้ว  เราก็นำไปใช้ได้เลย โดยเรียกด้วย property นี้

font-family: 'Pacifico', sans-serif;

การเลือก fallback font  ในกรณีที่ Email clients ไม่ support เราควรเลือก font ที่เป็น Web safe font และควรมี x-height  ที่เท่ากันกัน หรือไม่ต่างกันมาก เพราะจะได้ไม่มีผลกระทบต่อ layout ของอีเมลมากนัก ในกรณีที่เรียกใช้ fallback font

Web Font ที่ Support ใน Outlook โดย default แล้ว Outlook จะเรียกใช้ Times New Roman แต่กรณีที่เราอยากจัดการเรียกใช้ font หรือ CSS ที่เฉพาะเจาะจงให้กับ Outlook เท่านั้น มีวิธีการเรียกใช้ โดยเพิ่ม class=”fallback-font” ใน HTML element ที่เราต้องการเรียก fallback แล้วเพิ่ม Style ไว้ที่ <head> ของ Email template

<!--[if mso]>
<style type=”text/css”>
  .fallback-font {
    font-family: Arial, sans-serif;
  }
</style>
<![endif]-->

จบการเรียกใช้ Web font มาใช้ในอีเมลแล้วจ้า ต่อไปเป็นผลการทดลอง เพิ่ม Web font ให้อีเมล

จากผลการทดลอง

  • Apple mail ดูดีมาก เรียกใช้ยังไงก็มา
  • Outlook เรียก Web font ไม่มา แต่ก็สามารถ fallback ไปใช้  Web safe font แทน
    (Web safe fonts เป็น font default ที่ถูกติดตั้งใน computer, device หรือ OS ต่างๆ ใน เช่น Arial, Verdana, Georgia, Times New Roman และ Courier)
  • Gmail ในเว็บ ก็ใช้ Web safe font
  • Gmail ในมือถือ ก็ใช้ Web safe font เหมือนกัน

ไว้ตอนหน้าเรามาทดลองเช็ค Template Email ว่าที่เราเขียนมา ในแต่ละ Email Clients หน้าตาเป็นยังไง กันแบบง่ายๆ กันจ้า : D

Reference 
https://www.campaignmonitor.com/blog/email-marketing/2016/07/10-things-need-know-web-fonts-email-right-now/

Featured Image
Photo by Joanna Kosinska on Unsplash

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.