خطوط الويب: كيفية جعلها تعمل بشكل مثالي في البريد الإلكتروني

نشرت: 2021-04-24

من خلال دراستي العلمية للغاية (لاحظت ابنتي عندما بدأت في كتابة التقارير خلال العام الماضي) ، تعلمت أن أحد الجوانب الأولى للتصميم التي بدأ الناس في اللعب بها هي الطباعة. عندما تبدأ في كتابة التقارير لأول مرة ، فإنك تقضي ساعات في محاولة اكتشاف أفضل خط يمكن استخدامه. حسنًا ، ربما ليس ساعات ، لكن معظم الناس يقضون بعض الوقت في ذلك. لأنه ، كما تعلم العلامات التجارية الكبرى ، فإن الطباعة مهمة. وهذا مهم في البريد الإلكتروني.

لكن إمكانية الوصول مهمة أيضًا. لذا توقف عن محاصرة رسالتك في الصور ، وابدأ في استخدام النص المباشر مع الخطوط الآمنة للويب وخطوط الويب بدلاً من ذلك. بعد كل شيء ، النص الذي لا يعتمد على الصور ويمكن قراءته من قبل جمهور أوسع يؤدي إلى تجربة مشترك رائعة. وبما أن أفضل عملائك - يعود البريد الإلكتروني 36 دولارًا لكل دولار أمريكي يتم استثماره - فهذا رائع لاستراتيجية التسويق الشاملة.

في منشور المدونة هذا ، سأفصل:

خطوط الويب مقابل الخطوط الآمنة للويب
فوائد خطوط الويب
دعم عملاء البريد الإلكتروني والترخيص
أين تجد خطوط الويب
ترميزها في رسائل البريد الإلكتروني
أمثلة رائعة لخطوط الويب في البريد الإلكتروني

خطوط الويب مقابل الخطوط الآمنة للويب

هناك طريقتان مختلفتان يمكنك من خلالهما إجراء نص مباشر: خطوط الويب الآمنة وخطوط الويب. على الرغم من أنها تبدو متشابهة ، إلا أن هناك اختلافات محددة. لفهم هذه الاختلافات ، دعنا نلقي نظرة على كيفية عمل الخطوط في رسائل البريد الإلكتروني الخاصة بك.

عندما يتم تشفير بريدك الإلكتروني ، يتم الإعلان عن الخط باستخدام خاصية CSS تسمى عائلة الخطوط. يمكن أن تحتوي خاصية عائلة الخطوط هذه على اسم خط واحد فقط أو أسماء خطوط متعددة - يشار إليها غالبًا بمكدس الخطوط. يضمن تضمين أسماء خطوط متعددة أنه إذا لم يعمل أحد الخطوط ، فهناك خط احتياطي أو احتياطي من اختيارك. بدون سرد أسماء خطوط متعددة ، يجب أن يقرر عميل البريد الإلكتروني خط النسخ الاحتياطي. عندما يفتح المشتركون بريدك الإلكتروني ، يقرأ المتصفح خاصية عائلة الخطوط ويسحب الخط لاستخدامه.

خطوط الويب الآمنة

باستخدام خطوط الويب الآمنة ، يسحب المستعرض الخط من دليل الخطوط المحلي. هذا يعني أن هذه هي الخطوط المثبتة بالفعل على جهاز الكمبيوتر الخاص بك. تأتي جميع أجهزة الكمبيوتر بخطوط مثبتة مسبقًا ، وهي ما يعتبر آمنًا للويب. إنها آمنة للاستخدام لأن هناك فرصة جيدة حقًا أن يكون المشترك لديك قد حصل عليها بالفعل.

الجانب السلبي هو أن هناك عددًا محدودًا من الخطوط الآمنة للويب مقارنة بخطوط الويب. ويتم استخدامها بشكل متكرر ، لذلك من غير المرجح أن تبرز (إذا كان هذا هو ما تهدف إليه).

خطوط الويب الآمنة الواضحة هي:

اريال
هيلفيتيكا
فيردانا
جورجيا
تايمز نيو رومان

ولكن هناك العديد من الأشياء الأخرى التي يمكنك استخدامها بدرجة معينة من الثقة. لذا تخلص من حلقة الخطوط القياسية Arial أو Helvetica ، وابحث عن خط آمن للويب يناسب علامتك التجارية.

أفضل مورد وجدته لخطوط الويب الآمنة هو CSS Fonts. أحب أنها تتضمن نسبة مئوية من الاستخدام لأجهزة الكمبيوتر الشخصية وأجهزة Mac لكل خط حتى تعرف تقريبًا عدد المشتركين لديك الذين قد يرون الخط الذي تريده وعدد الأشخاص الذين سيرون احتياطيًا بدلاً من ذلك.

خطوط الويب

يتم سحب خطوط الويب من الخادم - إما خادم تستضيفه بنفسك أو خادم خارجي (مثل Google أو Adobe). لهذا السبب ، فإن مجموعة الخطوط التي يمكن استخدامها أكبر بكثير ، ويمكن استخدامها على أي جهاز كمبيوتر ... طالما أن المتصفح أو عميل البريد الإلكتروني يمكنه سحب الخط. في بعض الحالات ، قد يكون لدى المشترك لديك موقع ويب بالفعل تم تنزيل الخط وتثبيته على أجهزتهم ، لذا ستعمل هذه الخطوط حتى في عملاء البريد الإلكتروني الذين لا يدعمون خطوط الويب!

لذا ، بينما تمنحك خطوط الويب تنوعًا أكبر وحرية إبداعية ، فإنها تأتي بتكلفة: دعم عميل بريد إلكتروني محدود (والذي أتعمق فيه أكثر).

لماذا خطوط الويب؟

لذلك قد تتساءل ، لماذا تهتم بخطوط الويب على الإطلاق؟ بصفتك مسوقًا ومصممًا ، فأنت تعلم الضغط للبقاء على علامتك التجارية في البريد الإلكتروني باستخدام الألوان والتصميم و- نعم- الطباعة. تتيح لك خطوط الويب إظهار علامتك التجارية دون الاعتماد على الصور في النص الخاص بك.

كان قفل نسخة مهمة في الصور ممارسة قياسية في تصميم البريد الإلكتروني كطريقة للبقاء على العلامة التجارية والإبداع. لكن "إخفاء" النص في الصور يحد من إمكانية الوصول إلى البريد الإلكتروني لأن برامج قراءة الشاشة لا يمكنها قراءة النص الموجود على الصورة.

مثال على البريد الإلكتروني من Ace Hardware لخطوط الويب مع الصور وبدونها — البريد الإلكتروني مع الصور وبدونها عند استخدام خط الويب

مثال على البريد الإلكتروني Magic Spoon لخطوط الويب مع الصور وبدونها — البريد الإلكتروني مع الصور وبدونها عند استخدام نص في الصور

كما أن وجود نص في صورك يضر بتجربة المشترك إذا كانت الصور متوقفة عن التشغيل افتراضيًا. قد لا يكون هذا جزءًا كبيرًا من المشتركين لديك ، ولكن لا توجد طريقة لمعرفة ما إذا كان شخص ما قد أوقف صوره وفتح بريدك الإلكتروني. فلماذا لا نقدم أفضل تجربة لأوسع جمهور ممكن؟

تفتح خطوط الويب آفاقًا جديدة للإبداع في الطباعة ، مما يتيح لمصممي البريد الإلكتروني أن يكونوا مبدعين ويمكن الوصول إليهم - ويلتزمون بمظهر علامتهم التجارية وأسلوبها.

هل يمكنني استخدام خطوط الويب في البريد الإلكتروني؟

إذا لم تكن قد خمنت بالفعل ، فالجواب هو نعم! ولكن - كما هو الحال في كل ما يتعلق بالبريد الإلكتروني - هناك محاذير.

دعم عملاء البريد الإلكتروني

تعمل خطوط الويب فقط في بعض عملاء البريد الإلكتروني ، ويجب توخي الحذر للتأكد من عدم دعم الخط ، حيث يتراجع بأمان.

عميل البريد الإلكتروني	دعم خط الويب
بريد أبل	✓ نعم
توقعات 2007-2016	✘ لا
توقعات 2019	✘ لا *
Outlook لنظام التشغيل Mac	✓ نعم
برنامج Outlook Office 365	✘ لا *
تطبيق Gmail	✘ لا *
iOS	✓ نعم
تطبيق Outlook	✘ لا
بريد سامسونج	✘ لا *
بريد أميريكا أون لاين	✘ لا
بريد جوجل	✘ لا *
مكتب 365	✘ لا
Outlook.com	✘ لا
ياهو! بريد	✘ لا

* لديه بعض النتائج المتزعزعة اعتمادًا على طريقة تضمين البريد الإلكتروني ، والتي تمت مناقشتها لاحقًا.

يجدر إلقاء نظرة على قاعدة المشتركين لديك لمعرفة عدد الذين يشاهدون رسائل البريد الإلكتروني الخاصة بك في عميل بريد إلكتروني يدعم خطوط الويب. إذا كان هناك عدد كافٍ من المشتركين في قناتك ، فهذه طريقة رائعة لإضفاء لمسة إضافية على بريدك الإلكتروني.

إذا لم تكن الغالبية كذلك ، فلن يستحق الأمر وقتك وجهدك ، خاصة إذا كنت تفكر في استخدام خط ويب مدفوع.

ما عملاء البريد الإلكتروني الذين يستخدمهم المشتركون لديك ؟

اكتشف أين يفتح المشتركون رسائلك الإلكترونية وكيف يتفاعلون - باستخدام Litmus Email Analytics. احصل على الرؤى التي تحتاجها لتحسين رسائل البريد الإلكتروني وما بعدها.

اعرف المزيد →

الترخيص

تم تصميم خطوط الويب في الأصل لاستخدامها فقط على مواقع الويب ، لذا فإن ترخيصها عادةً ما يكون للاستخدام فقط على مواقع الويب وتطبيقات الهاتف المحمول. السبب وراء عدم سماح العديد من خدمات خطوط الويب باستخدام البريد الإلكتروني هو أنه يُنظر إليها على أنها توزع الخط ، وهو ما يتعارض مع العديد من اتفاقية ترخيص المستخدم النهائي (EULA) الخاصة بالخدمات.

جميع موفري خطوط الويب الذين اتصلنا بهم يدعمون استخدام خطوطهم في البريد الإلكتروني. كان لكل مزود ترخيص مختلف كان مطلوبًا ، لذلك لا توجد طريقة قياسية يتم بها ترخيص الخطوط في البريد الإلكتروني. إذا كنت تبحث عن استخدام خط ، فتواصل مع الشركة لتعرف بالضبط كيفية ترخيصها لخطوطها.

أين تجد خطوط الويب

لذلك فكرت في كل شيء وقررت أنك تريد تجربة خطوط الويب. مع خيارات لا حصر لها على ما يبدو ، يمكنك العثور على ما يناسب علامتك التجارية. ولكن من المهم أيضًا مراعاة إمكانية الوصول.

بعض الخطوط أسهل في القراءة من غيرها.

يمكن أن تجعل الخطوط المزخرفة أو الزخرفية ، مثل خطوط العرض أو الكتابة اليدوية ، من الصعب على الأشخاص الذين يعانون من إعاقات بصرية أو عسر القراءة التمييز بين أشكال الحروف. تعتبر خطوط Sans-serif (الخطوط التي لا تحتوي على ميزات موسعة أو تجعيد الشعر في أحرفها مثل Arial أو Calibri أو Century Gothic أو Helvetica) وخطوط الألواح (الخطوط ذات الخطوط السميكة مثل Museo Slab و Rockwell) أكثر سهولة.

إليك بعض الأماكن الجيدة لبدء البحث.

خطوط جوجل

هناك الكثير من خدمات خطوط الويب المتاحة ، لكن خطوط Google هي المفضلة لدينا. الخدمة مجانية تمامًا ، ويمكنك تنزيل خطوط الويب على جهاز الكمبيوتر الخاص بك إذا كنت تسخر من التصميمات في Adobe Photoshop أو Sketch أو أي برنامج تصميم آخر.

خطوط Adobe

أصبح Typekit أصبح Adobe Fonts اعتبارًا من أكتوبر 2018. وهم يدعمون الآن كلاً من أسلوب <link> وimport لاستخدام الخطوط كخطوط ويب (المزيد عن ذلك بعد ذلك). الخدمة ليست مجانية تمامًا ، ولكن إذا كان لديك بالفعل أي اشتراك في Creative Cloud ، فسيتم تضمينه في ذلك.

خدمات خطوط الويب

هناك العديد من خدمات خطوط الويب الأخرى المتاحة على أساس مدفوع. ستحتاج إلى التأكد من حصولك على الترخيص الصحيح لاستخدامها في بريدك الإلكتروني.

اكتب الشبكة (ترخيص الويب)
مسبك نوع العملية (رخصة ويب)
Optimo (ترخيص الإعلانات الرقمية)
Fontspring (ترخيص بريد إلكتروني مخصص)
Typotheque (ترخيص الويب)
نوع الإنتاج (رخصة إعلان عبر الإنترنت)
MyFonts (ترخيص الويب)
النوع التجاري (رخصة الويب)

مع تراخيص الويب ، قد يكون هناك خيار لاستضافة الخط بنفسك أو أن يستضيف الموفر الخط. في بعض تراخيص الويب ، تدفع مقابل قدر معين من مشاهدات الصفحة مع كل بريد إلكتروني يقوم بتحميل الخط باعتباره عرض الصفحة ، لذا تأكد من أخذ ذلك في الاعتبار عند شراء ترخيص.

كيفية تضمين خطوط الويب في رسائل البريد الإلكتروني

نظرًا لأن خطوط الويب عادةً لا يتم العثور عليها على الجهاز المحلي لشخص ما ، وبدلاً من ذلك يتم استضافتها في مكان آخر ، يجب عليك "تضمين" أو استيراد خط الويب الخاص بك في رسائل البريد الإلكتروني الخاصة بك أولاً قبل أن تتمكن من استخدامها بالفعل.

1. احصل على عنوان URL لملف الخط الخاص بك

ستحتاج إلى عنوان URL لخط الويب الخاص بك لاستدعائه في بريدك الإلكتروني. يجب أن يكون لخدمة خط الويب الخاص بك عنوان URL هذا. ولكن إذا كنت تستضيف ملف الخط بنفسك ، فاحصل على عنوان URL من مكان وجود خط الويب على الخادم الخاص بك. تأكد من أنه عنوان URL عام وأنه لا يأتي من خادم محلي. بخلاف ذلك ، لن يتمكن المشتركون لديك من الوصول إلى خط الويب وسيروا خطًا احتياطيًا بدلاً من ذلك.

إذا كنت تستخدم Google Fonts ، فإن العثور على عنوان URL صعب بعض الشيء ، ولكنه ليس صعبًا للغاية. اكتشف كيف في الخطوة التالية لطريقة @ font-face embed.

2. استيراد خط الويب باستخدام واحدة من ثلاث طرق

هناك ثلاث طرق لتضمين خطوط الويب في البريد الإلكتروني (وتحذير قد يحد من الطريقة التي يمكنك استخدامها). الطرق الثلاث لتضمين الخط الخاص بك هي:

<ارتباط>
@يستورد
@ font-face

فلماذا تختار طريقة على أخرى؟

تؤجل طريقةimport تحميل خط الويب الذي يتم استيراده حتى يتم تحميل HTML المضمن فيه بالكامل. يمكن أن يؤدي ذلك إلى أن يستغرق خط الويب وقتًا أطول قليلاً ليظهر في بريدك الإلكتروني ، بينما يتم تحميل بقية البريد الإلكتروني. على العكس من ذلك ، تقوم طريقة <link> بتحميل المورد بشكل مضمن حيث تتم قراءة رمز ملف HTML (من أعلى إلى أسفل) ، مما قد يؤخر تحميل بريدك الإلكتروني إذا كان ملف خط الويب الخاص بك كبيرًا بشكل خاص.

شيء آخر يجب مراعاته عند اختيار طريقة للاستخدام هو ما يدعمه المرساب الكهروستاتيكي.

يمكنك إنشاء رمز جميل يعمل في Litmus طوال اليوم ، ولكن إذا قام برنامج ESP بتغيير الكود الخاص بك ، كما نعلم أن معظمهم يفعلون ذلك ، فلن يكون هناك أي شيء تفعله مهمًا. تأكد من أن برنامج ESP الخاص بك لا يغير شفرتك بطريقة قد تتسبب في توقف الخطوط عن العمل. في Litmus ، لا يتيح لنا المرساب الكهروستاتيكي الخاص بنا تضمين شروط MSO الشرطية حول عناصر النمط. لذلك لن تعمل أساليب <link> وimport بالنسبة لنا لأنهما غير مدعومين جيدًا في Outlook ، وهو ما نناقشه بمزيد من التفصيل أدناه.

باستخدام <link>

يعد استخدام طريقة <link> طريقة بسيطة نسبيًا لتضمين الخطوط في بريدك الإلكتروني. ضع هذا السطر من التعليمات البرمجية في <head> من بريدك الإلكتروني ، بالقرب من الجزء العلوي:

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

باستخدام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 ليس بالأمر السهل ، ولكنه ليس صعبًا للغاية.

أولاً ، عليك أن تجد الخط الذي ترغب في استخدامه على Google Font. ثم اختر النمط الذي تريد استخدامه. ستظهر قائمة منبثقة على اليمين.

googe_fonts

في القائمة المنبثقة ، سيكون هناك اختيار لـ <link> أوimport. سيحتوي كلاهما على عنوان URL (مظلل في لقطة الشاشة أعلاه). يمكنك نسخ عنوان URL هذا ولصقه في شريط العنوان في متصفحك للعثور على ورقة أنماط CSS التي يستخدمها Google.

google_font_api

انسخ والصق الإصدار "اللاتيني" من @ font-face بين علامتي <style>.

في Litmus ، طريقة @ font-face هي تنفيذنا الأول لاستيراد خطوط الويب إلى رسائل البريد الإلكتروني الخاصة بنا.

كل الفضل في طريقة استيراد خطوط الويب هذه يعود إلى بول إيري ، المدافع عن إمكانية الوصول إلى البريد الإلكتروني ، كما هو مفصل في رسالة إخبارية سابقة من النوع: E.

3. اختر الخط الاحتياطي الصحيح

عند استخدام خطوط الويب ، من الضروري أن يكون لديك خط ويب احتياطي آمن لعملاء البريد الإلكتروني الذين لا يدعمون خطوط الويب.

يحتوي كل عميل بريد إلكتروني على خط افتراضي إذا كان الخط المدرج في مجموعة عائلة الخطوط غير متوفر. على سبيل المثال ، يستخدم Gmail Arial ، ويستخدم Apple Mail برنامج Helvetica ، ويستخدم Outlook Times New Roman. إذا لم يعجبك صوت أي من هذه الخطوط الافتراضية ، فلدينا بعض الأخبار الجيدة - يمكنك اختيار الخط الاحتياطي عند كتابة التعليمات البرمجية في مجموعة عائلة الخطوط (في الخطوة التالية).

يعد اختيار الخط الاحتياطي الصحيح الذي يحتفظ بتصميم بريدك الإلكتروني أمرًا أساسيًا لتقديم تجربة رائعة لجميع المشتركين ، بغض النظر عن عميل البريد الإلكتروني الذي يستخدمونه.

يجب أن تكون الخطوط الاحتياطية من نفس نوع خط الويب - استخدم خط احتياطي sans-serif إذا كان خط الويب الخاص بك هو خط sans-serif ، وخط احتياطي serif إذا كان خط الويب الخاص بك هو أيضًا خط serif. سيساعد استخدام نفس نمط الخط في الاحتفاظ بتصميم بريدك الإلكتروني في عملاء بريد إلكتروني مختلفين.

يمكنك أن تأخذ خطوة أخرى إلى الأمام من خلال تحليل x-height للخطوط.

الارتفاع 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. تجنب خط غامق زائف أو مائل زائف

إذا كانت لديك إصدارات مصاحبة للخط الغامق والمائل من ملفات خطوط الويب ، فلنستخدمها!

لقد بذل مصممو Typeface الكثير من التفكير والجهد في الحصول على جميع الأنماط المختلفة للخط بشكل صحيح تمامًا ، لذلك من الأفضل تطبيق تصميم الكتابة الأصلي بدلاً من السماح لعميل البريد الإلكتروني أو المتصفح بتطبيق خط غامق زائف أو مائل زائف بشكل عشوائي الخط العادي.

في الأساس ، لا تفعل هذا:

@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" ! وبالمثل ، فقط إضافة وزن الخط: غامق ؛ سيتم سحب "Roboto-Bold" وإضافة نمط الخط: italic؛ سوف يسحب "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 (وهو ليس كذلك) t دعم خطوط الويب المخصصة) ، فستشاهد فقط 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]-->`

في الواقع ، في هؤلاء العملاء ، يبدو أن استيراد @ يعمل بالفعل! لكن هل هو حقا؟ لقد جربناها مع الخطوط الأخرى ، وكانت النتائج متكافئة مع ما تتوقعه من Outlook:

اختبار خطوط الويب في برنامج outlook

يبدو أنه يضع أحيانًا خط نظام بدلاً من الخطوط التي تحددها. وفي حالة مونتسيرات ، لست متأكدًا تمامًا مما يحدث هناك ، لكن هذا ليس مونتسيرات. في الواقع يبدو أكثر مثل لاتو. لذلك يبدو أن 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 بعد كل شيء ".

كنت تعتقد أنه نظرًا لأن Gmail هو أحد منتجات Google وأن Google Fonts هو أحد منتجات Google ، فسوف يلعبان بشكل جيد معًا. لكن للأسف ، هذا ليس هو الحال.

لا تعمل خطوط الويب في Gmail حتى لو كانت أحد خطوط Google وحتى إذا كنت تستخدم الرمز المقدم من Google. الاستثناء الوحيد لهذا هو Roboto:

استخدام خطوط جوجل المختلفة	استخدام طرق تضمين مختلفة

وفي الواقع ، في تطبيق Gmail Mail على Android ، تعود جميع خطوط sans-serif إلى Roboto:

استخدام خطوط جوجل المختلفة	استخدام طرق تضمين مختلفة

بعض الإلهام لتبدأ

حسنًا ، من الآن مستعد لرؤية بعض الأمثلة الرائعة من العلامات التجارية التي تستخدم خطوط الويب في البريد الإلكتروني بالطريقة الصحيحة؟

استخدمت Ace Hardware خطوط الويب حيث يتم دعمها ، لكنها اختارت Rockwell كخط احتياطي لضمان استمرار ظهور البريد الإلكتروني على العلامة التجارية في عملاء البريد الإلكتروني الآخرين.

مع خطوط الويب	مع الاحتياطيات

يستخدم Webflow خطوط النظام كبديل لخطوط الويب الخاصة بهم ويستخدم أوزان الخطوط لضمان تجربة طباعة رائعة بغض النظر عن الخط الذي يظهر.

البريد الإلكتروني لتدفق الويب

ابق على العلامة التجارية وخالية من الأخطاء

تعد خطوط الويب طريقة رائعة للحفاظ على النص في رسائل البريد الإلكتروني الخاصة بك ذات علامة تجارية ويمكن الوصول إليها. ولكن كما ترون من هذا المنشور ، هناك الكثير من الفروق الدقيقة التي يجب مراعاتها. لهذا السبب من المهم بنفس القدر أن ...

كن دائما في الاختبار!

لقد بذلنا قصارى جهدنا لاختبار مجموعة من الظروف المختلفة ، لكن المرساب الكهروستاتيكي الخاص بك قد يشوه شفرتك بطريقة غير متوقعة. تأكد من اختبار رسائل البريد الإلكتروني الخاصة بك قبل إرسالها للتأكد من أن جميع العناصر الاحتياطية تعمل بشكل صحيح.

اختبار ضمان الجودة لخطوط الويب في رسائل البريد الإلكتروني الخاصة بك

هل فعلت ذلك بشكل صحيح؟ اكتشف ذلك من خلال إصدار تجريبي مجاني من Litmus. معاينة كيف تبدو رسائل البريد الإلكتروني الخاصة بك في أكثر من 90 عميل البريد الإلكتروني والتطبيقات والأجهزة. وحافظ على سمعة علامتك التجارية من خلال رسائل بريد إلكتروني خالية من العيوب.

ابدأ تجربتك المجانية من Litmus →

تستحق إضافة خطوط الويب ذلك كتعزيز تقدمي رائع لمساعدتك على توفير أفضل تجربة للمشتركين في صناديق البريد الوارد الخاصة بهم. استمتع! وأخبرنا إذا كان لديك أي أسئلة أو تعليقات أدناه.

نُشر في الأصل في 11 أبريل / نيسان 2019 بقلم Jaina Mistry. آخر تحديث في 23 أبريل 2021.