راهنمای کامل استفاده از وب‌فونت‌ها در طراحی ایمیل

با توجه به تنوع فونت‌های ایمن برای وب، انتخاب فونت مناسب برای استفاده در ایمیل‌ موضوع خیلی پیچیده‌ای نیست. با تغییرات جدیدی که در این حوزه رخ داده است، امروزه اکثر طراحان ایمیل در اجرای وب‌فونت‌ها برای ایمیل‌های خود همان تکنیک‌هایی را به‌کار می‌برند که طراحان وب سال‌ها است از آن استفاده می‌کنند. وب‌فونت‌ها به طراحان وب اجازه می‌دهند تا در تایپوگرافی خود خلاقیت بیشتری داشته و بتوانند فونت‌های غیر معمول را در طراحی‌های خود انتخاب کنند.
در این‌ مطلب سعی داریم به بررسی جزئیات وب‌فونت‌ها و نحوه استفاده از آن‌ها در طراحی ایمیل‌ها بپردازیم:

Web Font چیست؟

دو نوع فونت مختلف برای طراحی ایمیل، وجود دارد. فونت‌های امن وب و وب‌فونت‌ها.

  1. فونت‌های امن وب (Web Safe Fonts)
    Arial ، Times New Roman ، Verdana یا Georgia به عنوان معروف‌ترین فونت‌های امن وب شناخته شده‌اند. آنها فونت‌های پیش‌فرض موجود در اکثر سیستم عامل‌ها و دستگاه‌های مختلف هستند.
  1. وب‌فونت‌ها (Web fonts)
    وب‌فونت‌ها به عنوان فونت‌های پیش‌فرض در دستگاه‌ها و سیستم عامل‌های مختلف وجود ندارند و به طور خاص برای استفاده در وب‌سایت‌ها طراحی شده‌اند. به طور مثال Open Sans و Roboto نمونه‌هایی از وب‌فونت هستند که ممکن است با آنها آشنا باشید.

چرا وب‌فونت‌ها؟

در طراحی ایمیل، استفاده از متون در تصاویر، روشی رایج و آسان در جهت انحصاری ماندن برندینگ و خلاقیت‌های شما است. اما مشکل پنهان کردن متن در تصاویر این است که در صورت عدم بارگزاری تصویر در برخی کلاینت‌ها، به خوانندگان اجازه خواندن متن روی تصویر را نمی‌دهد.

وب‌فونت‌ها دنیای جدیدی از خلاقیت را، در تایپوگرافی برای طراحان ایمیل باز می‌کنند تا به ظاهر و محتوای برندشان بیشتر بپردازند.

فونت‌های ایمیل و وب

وب‌فونت‌ها در تمامی دستگاه‌ها و سیستم‌ها بارگزاری نمی‌شوند. لیست کلاینت‌های ایمیلی که از وب‌فونت‌ها پشتیبانی می‌کنند در زیر آمده است:

  • Apple Mail
  • iOS Mail
  • Google Android
  • Samsung Mail (Android 8.0)
  • Outlook for Mac
  • Outlook App

اگرچه لیست کلاینت‌های پشتیبانی شده ایمیل کوتاه به نظر می‌رسد، اما باید توجه داشته باشید که بیشتر آنها از کلاینت‌های مشهور ایمیل‌ها هستند و بسیاری از کاربران از همین تعداد محدود استفاده می‌کنند.

باید بدانید، علی‌رغم اینکه Gmail از وب‌فونت‌ها پشتیبانی نمی‌کند، اما چنان‌چه از فونت‌های Google Sans  و Roboto در ایمیل‌های خود استفاده کنید، در Gmail نمایش داده خواهند شد. به همین منظور آنها را به راحتی به font-family فایل CSS خود اضافه نمایید. این فونت‌ها زمانی کاربرد دارد که محتوای شما به زبان انگلیسی باشد.

چگونه از وب‌فونت‌ها در ایمیل استفاده کنیم؟

سه روش اصلی برای استفاده از وب‌فونت‌ها در ایمیل وجود دارد:

روش Import

استفاده از import یکی از روش‌های ساده برای وارد کردن وب‌فونت‌ها در ایمیل است. کافیست کد زیر را در <head> ایمیل خود، در خطوط اول بخش <style> قرار دهید:

@import url('https://fonts.googleapis.com/css?family=Montserrat');

در این مثال، font-family وارد شده “Montserrat” است.

سرویس وب‌فونت شما، URL مورد نیاز را به شما می‌دهد. اگر فونت مورد نظر را خودتان میزبانی می‌کنید، باید آدرس فایل وب‌فونت خود را در URL وارد کنید. این روش، در اکثر کلاینت‌های ایمیل به خوبی پشتیبانی شده و فقط در  (Android Gingerbread)۲.۳ Android و نسخه قدیمی اندروید (که دارای سهم ناچیزی از بازار است)، قابلیت پشتیبانی ندارد.

روش LINK

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

در این روش نیز درست مانند روش import، سرویس وب‌فونت شما مقدار href را تعریف می‌کند. اگر خودتان فایل فونت را میزبانی می‌کنید، این نشانی اینترنتی را تغییر دهید تا به جایی که وب‌فونت در سرور شما قرار دارد اشاره کند و خط کد بالا را باید در <head> ایمیل‌تان قرار دهید. روش <link> با پشتیبانی از کلیه کلاینت‌های ایمیل ذکر شده در بالا کمی بهتر از روش import عمل می‌کند.

روش IMPORT یا LINK؟ کدام روش بهتری است؟

بارگیری وب‌فونت در روش import، تا اجرا شدن کامل HTML درون آن، زمان خواهد برد. این امر می‌تواند باعث شود وب‌فونت شما با طی کردن زمان بیش‌تری در ایمیل‌تان ظاهر شود، در همین حین بقیه ایمیل نیز در حال بارگزاری است.

در مقابل در روش <link>  کدهای HTML بعد از بارگیری کامل، به ترتیب از بالا به پایین اجرا می‌شود که این موضوع بارگزاری ایمیل را به تاخیر خواهد انداخت مخصوصا اگر حجم فایل وب‌فونت بالا باشد.

روش FONT-FACE

سایت‌های ارائه‌دهنده وب‌فونت معمولا پنج فرمت فایل: eot، woff، woff2، svg، و ttf را ارائه می‌دهند. فرمت woff به طور کل بیشترین پشتیبانی را دارد، بنابراین پیشنهاد می‌کنیم در صورت امکان از این فرمت استفاده نمایید. روش font-face تنها روشی است که به شما این امکان را می‌دهد تا فرمت مورد نظر را برای اجرای وب‌فونت‌ها به طور خاص انتخاب نمایید.

در زیر یکی از تعاریف رایج font-face با استفاده از یکی از فونت‌های گوگل آمده است:

@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
   src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');
}

اگر از فونت‌‌های Google استفاده می‌کنید، یافتن آدرس اینترنتی یک وب‌فونت کار چندان آسانی نیست. برای اطلاعات بیشتر می‌توانید مطلب چگونه آدرس یک وب‌فونت گوگل رو به دست بیاوریم را مطالعه نمائید.

 

استفاده از وب‌فونت‌ها در ایمیل

پس از وارد کردن وب‌فونت، خواهید دید استفاده از آن در ایمیل به آسانی استفاده از یک فونت امن وب با font-family در روش import است.

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

انتخاب یک فونت FALLBACK

هنگام استفاده از وب‌فونت‌ها، برای آن دسته از کلاینت‌هایی که وب‌فونت‌ها را پشتیبانی نمی‌کنند، استفاده از یک فونت امن نیز ضروری است.

فونت‌های امن پیش فرض وب

چنانچه کلاینت‌های ایمیل دسترسی به فونت‌های لیست font-family برایشان مقدور نباشد، یک فونت پیش‌فرض دارند. به عنوان مثال، Gmail از Arial، Apple Mail از Helvetica و Outlook از Calibri استفاده می‌کند.

خبر خوب این است که اگر شما تحریر فونت‌های پیش فرض خود را دوست ندارید، می‌توانید از لیست font-family، فونت جایگزین (Fallback) را انتخاب نمایید.

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

با این روش اگر کلاینت‌ها نتوانند از فونت شماره یک استفاده کنند، امکان این را دارند تا به گزینه‌های بعدی در لیست شما دسترسی داشته باشند.

نحوه انتخاب FALLBACK مناسب

انتخاب فونت جایگزین درست و متناسب با طراحی ایمیل، می‌تواند امری مهم و لذت‌بخش باشد. به عنوان مثال اگر وب‌فونت شما sans-serif باشد، فونت Fallback تان نیز باید sans-serif باشد. در واقع استفاده از سبک فونت‌های یکسان، کمک می‌کند تا طراحی ایمیل در کلاینت‌های مختلف به درستی حفظ شود.

شما می‌توانید با تجزیه و تحلیل x-height فونت‌ها یک قدم به جلو بردارید. X-height ارتفاع عمودی فونت است که در حالت ایده‌آل جهت جلوگیری از به هم ریختگی طراحی ایمیل خود، باید ارتفاع عمودی فونت جایگزین‌تان را هماهنگ با ارتفاع عمودی وب‌فونت‌تان انتخاب کنید.

اجتناب کردن از FAUX BOLD / FAUX ITALIC

طراحان Typeface برای به دست آوردن سبک‌های مختلف فونت‌ها فکر و تلاش زیادی را انجام داده‌اند، بنابراین بهترین کار این است که مرورگر یا کلاینت ایمیل به جای اعمال faux bold یا faux italic از نوع اصلی فونت‌های طراحی شده استفاده کنند.

در واقع، این کار را نکنید:

@font-face {
   font-family: 'Montserrat';
   src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
}

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

می‌توانید مانند طراحی وب، این سبک‌ها را در بخش font-face فونت‌های اصلی تعریف نمایید. مانند:

@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: normal;
   src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
}
@font-face {
   font-family: 'Montserrat';
   font-style: italic;
   font-weight: normal;
   src: local('Montserrat-Italic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUQjIg1_i6t8kCHKm459WxRyS7m0dR9pA.woff2) format('woff2');
}
@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: bold;
   src: local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format('woff2');
}
@font-face {
   font-family: 'Montserrat';
   font-style: italic;
   font-weight: bold;
   src: local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');
}

همان‌طور که مشاهده می‌کنید، می‌توانیم استایل‌های مختلف، به فونت‌های مختلف بدهیم. بدین ترتیب اگر فونت خود را در HTML به شکل زیر طراحی کنید:

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

در واقع فونت اصلی “Montserrat-BoldItalic” را فراخوانده‌ایم. بنابراین ممکن است بپرسید به جای تعریف یک font-family برای هر استایلی که در فونت‌های اصلی قرار می‌گیرد، چرا باید این کار را انجام دهیم.

این کار را نیز نکنید:

@font-face {
   font-family: 'Montserrat Bold Italic';
   src: local('Montserrat Bold Italic'), local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');
}

style="font-family: 'Montserrat Bold Italic', Verdana, sans-serif;"

این کار مشکلی ایجاد خواهد کرد. استفاده از font-family برای ذخیره استایل، نه تنها CSS بسیار پیچیده و زائد ایجاد می‌کند، بلکه در صورت بروز خطا در فونت جایگزین، می‌تواند باعث از بین رفتن استایل‌هایی شود که به متن خود داده‌اید.

با OUTLOOK چیکار کنیم؟

با وجود فونت Times New Roman به عنوان فونت جایگزین پیش فرض، Outlook از قدیم چالشی برای تایپوگرافی در ایمیل مارکتینگ مطرح بوده است. در حالی که 2019 Outlook با وجود پشتیبانی از فونت‌های Fallback معرفی شد، فقدان این امکان در نسخه‌های قدیمی‌تر Outlook هنوز یک چالش بزرگ برای طراحان ایمیل محسوب می‌گردد.

هدف Outlook پیروی کردن از CSS است. در واقع همان طور که توسط تگ های <!–[if mso]> و <![endif]-> مشخص می‌شود، عنوان می‌کند که outlook از یک دسته فونت متفاوت استفاده می‌نماید.

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

در هر جایی از ایمیل‌تان که font-family را تعریف می‌کنید، از کلاس fallback-font استفاده نمایید:

<td class="fallback-font" style="font-family: 'Montserrat', Arial, sans-serif;”>Your text here</td>

در ضمن فونت‌‌های شما در 2013/2010/2017 Outlook بهتر است به جای Times New Roman با Arial جایگزین شود.

راه حل دیگر برای این مشکل، استفاده از font-face داخل دستورالعمل media می‌باشد که در واقع آن را از outlook پنهان می‌کنیم:

@media screen { 
   @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400;
      src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');
   }
}

اکنون outlook به سادگی از “Montserrat” در بخش font-family گذشته و فونت بعدی را می‌خواند.

همچنین روشی وجود دارد که می‌توانیم فونت جایگزین مایکروسافت آفیس (mso-font-alt) را هدف قرار داده و در بلاک font-face با فونت انتخابی‌تان آن را مقدار‌دهی کنید.

 

آیا می‌توانم از وب‌فونت‌های فارسی استفاده کنم؟

خوشبختانه‌ باید بگوییم، بله. وب‌فونت‌هایی مثل ایران‌سنس (IRANSans)، خانواده یکان (IranYekan)، وزیر، شبنم و سایر فونت‌هایی که برای وب طراحی شده‌اند، با راحتی قابل استفاده در طراحی ایمیل هستند و تفاوتی با فونت‌های انگلیسی در نحوه استفاده از آنها وجود ندارد. به طور مثال چنانچه از روش FONT-FACE بخواهیم فونت ایران‌سنس را تعریف نمائیم می‌توانیم از کد زیر استفاده کنید و در یک فایل css این کدها را تعریف نمائید:


@font-face {
    font-family: 'IranSans';
    font-style: normal;
    font-weight: 300;
    src: url('https://kamva.ir/fonts/iransans/eot/IRANSansWeb_Light.eot');
    src: url('https://kamva.ir/fonts/iransans/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
      url('https://kamva.ir/fonts/iransans/woff2/IRANSansWeb_Light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
      url('https://kamva.ir/fonts/iransans/woff/IRANSansWeb_Light.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
      url('https://kamva.ir/fonts/iransans/ttf/IRANSansWeb_Light.ttf') format('truetype');
}

نکته مهم: باید توجه داشته باشید که آدرس‌دهی در قسمت url باید به صورت مستقیم و absolute باشد و نمی‌تواند نسبی (relative) باشد. به طور مثال، نمونه زیر اشتباه است:

src: url('../fonts/iransans/eot/IRANSansWeb_Light.eot');

 

وب‌فونت‌ها انگلیسی را از کجا پیدا کنیم؟

برای یافتن وب‌فونت‌های انگلیسی، چندین راه وجود دارد که می‌توانید آن‌ها رو در مطلب نحوه یافتن وب‌فونت‌ها مطالعه نمائید.

آیا برای استفاده وب‌فونت‌ها در Gmail راهی وجود دارد؟

برخی طراحان ایمیل در طراحی خود از یک حقه‌ای استفاده می‌کنند تا در موارد بسیار نادری، بتوانند از وب‌فونت مورد نظر خود استفاده کنند. آن حقه بدین‌صورت است که آنها در بخش font-family خود اسم وب‌فونت‌ها مشهور را به صورت fallback نوشته و احتمال اینکه این فونت‌ها بر روی سیستم‌عامل شخص بازکننده ایمیل نصب شده باشد را در نظر گرفته و بر اساس اولویت، آنها را در font-family وارد می‌کنند. به طور مثال به کد زیر دقت نمائید:

font-family: IRANSans,'IRAN Sans',IranSansWeb,Iranyekan,'IRAN Yekan',calibri,Segoe UI,tahoma,arial, sans-serif;

در این حالت چنانچه فونت ایران‌سنس بر روی سیستم‌عامل بازدیدکننده نصب شده باشد، ایین وب‌فونت بارگذاری شده و ایمیل با این فونت نمایش داده می‌شود. در صورتی که این فونت نصب نباشد و فونت ایران‌یکان نصب شده باشد، آن فونت نمایش داده می‌شود. در انتها هم از فونت‌های ایمین استفاده می‌شود تا در صورتی که هیچکدام از فونت‌های قبلی، نصب نشده باشد، متن ایمیل با فونت‌های ایمن نمایش داده شود.

با این روش می‌توان وب‌فونت‌ها در Gmail را برای آن‌دسته از کاربرانی که از این فونت‌ها بر روی سیستم‌عامل خودشان دارند، نمایش داد. هر چند که ممکن است تعداد این کاربران محدود باشد، اما از صفر بهتر است. (در نظر داشته باشید در صورتی که مخاطبان شما از جامعه متخصصین باشند، احتمال نصب بودن این فونت‌ها بر روی سیستم‌هایشان کم نخواهد بود)

چگونه از وب‌فونت‌ها در پاکت استفاده کنیم؟

برای طراحی کمپین‌های خود در سیستم پاکت، در مرحله طراحی (design) با ۳ روش مختلف روبرو می‌شوید:

روش Drag & Drop

چنانچه روش Drag & Drop را انتخاب کرده باشید، می‌توانید پس از ورود به محیط طراحی، بر روی باکس متنی خود کلیک کرده و از سمت راست صفحه، بر روی گزینه Font family کلیک کرده و گزینه Add font را انتخاب نمائید:

add font

سپس در باکسی که ظاهر می‌شود، در بخش Web Font Link آدرس فایل css ای که فونت‌ها به صورت FONT-FACE در متن آن تعریف شده است (پیش‌تر این متن توضیح داده شده است) را مشخص می‌کنید. سپس در فیلد بعدی اسم وب‌فونت را مشخص و در گزینه آخر نیز مقدار fallback font‌ را تعیین می‌نمائید:

 

پس از افزودن آن به ایمیل، دیگر نیازی به تعریف مجدد آن برای استفاده در سایر باکس‌های متنی نبوده و می‌توانید فونت تعریف شده رو از منوی Font Family مستقیما انتخاب نمائید.

iran sans

 

 

روش Rich Text Editor

در این روش می‌توانید پس از طراحی متن ایمیل خود، از منوهای بالا گزینه Source رو انتخاب نمائید و فایل‌های css و دستورات Style را به صورت دستورات استاندارد HTML در این ویرایشگر وارد نمائید.

روش Paste Your Code

در این روش مانند روش بالا می‌توانید متن HTML ایمیل خود را به همراه تعریف وب‌فونت‌ها در باکس نمایان شده وارد نمائید. همین!

paste your code

 

کلام آخر: تست کردن را فراموش نکنید!

از آنجا که استفاده از وب‌فونت‌ها در ایمیل هنوز هم کمی تجربی تلقی می‌شود، توصیه می‌کنیم در ابتدا آن‌ها را تست نمایید، به خصوص اگر وب‌فونت‌ها را در قالب‌هایی مستقر کرده‌اید که ممکن است مدام به‌روزرسانی نشوند زیرا تغییرات و به‌روزرسانی محصولات ارائه‌دهندگان کلاینت‌های ایمیل معمولاً از قبل اعلام نشده و اصولا این اتفاق به صورت پراکنده رخ می‌دهد.

شایان ذکر است چنانچه وب‌فونت را روی رایانه شخصی خود نصب کرده باشید، می‌توانید در رایانه خود، وب‌فونت را هنگام تست زنده کلاینت‌های ایمیل مشاهده کنید.

آیا این پاسخ به شما کمک کرد ؟

مقالات مرتبط

3 نظر

  1. مجید

    خیلی ممنون از پاکت. نمی‌دونستم که میشه از فونت ایران‌سنس هم استفاده کرد. عالی بود 🙂

دیدگاه خود را بیان کنید