Web Yazı Tipleri: E-postada Mükemmel Çalışmaları Nasıl Sağlanır

Yayınlanan: 2021-04-24

Çok bilimsel çalışmamdan (kızımı geçen yıl rapor yazmaya başladığında gözlemledim), tasarımın insanların oynamaya başladığı ilk yönlerinden birinin tipografi olduğunu öğrendim. Rapor yazmaya ilk başladığınızda, kullanılacak en iyi yazı tipini bulmak için saatler harcarsınız. Tamam, belki saatler değil, ama çoğu insan buna biraz zaman harcıyor. Çünkü büyük markaların bildiği gibi tipografi önemlidir. Ve e-postada önemlidir.

Ancak erişilebilirlik de önemlidir. Bu yüzden mesajınızı resimlere sıkıştırmayı bırakın ve bunun yerine web için güvenli yazı tipleri ve web yazı tipleriyle canlı metin kullanmaya başlayın. Sonuçta, resimlere bağlı olmayan ve daha geniş bir kitle tarafından okunabilen metinler harika bir abone deneyimi sağlar. Ve en iyi müşterileriniz olarak - e-posta, yatırdığınız her 1 Dolar için 36 Dolar döndürür - bu, genel pazarlama stratejiniz için harikadır.

Bu blog gönderisinde, parçalara ayıracağım:

Web yazı tipleri ve web için güvenli yazı tipleri
Web yazı tiplerinin faydaları
E-posta istemci desteği ve lisanslama
Web yazı tiplerini nerede bulabilirim?
Bunları e-postalara kodlamak
E-postadaki harika web yazı tipleri örnekleri

Web yazı tipleri ve web için güvenli yazı tipleri

Canlı metin yapmanın iki farklı yolu vardır: web için güvenli yazı tipleri ve web yazı tipleri. Kulağa aynı gelse de, kesin farklılıklar var. Bu farklılıkları anlamak için e-postalarınızda yazı tiplerinin nasıl çalıştığına bir göz atalım.

E-postanız kodlandığında, yazı tipi, yazı tipi ailesi adı verilen bir CSS özelliği kullanılarak bildirilir. Bu yazı tipi ailesi özelliği, genellikle bir yazı tipi yığını olarak adlandırılan yalnızca bir yazı tipi adına veya birden çok yazı tipi adına sahip olabilir. Birden çok yazı tipi adı eklemek, bir yazı tipi çalışmazsa, seçtiğiniz bir yedek veya yedek yazı tipi olmasını sağlar. Birden fazla yazı tipi adı listelemeden, e-posta istemcisi yedek yazı tipinize karar verir. Aboneleriniz e-postanızı açtığında, tarayıcı font-family özelliğini okur ve kullanılacak fontu çeker.

Web için güvenli yazı tipleri

Web güvenli yazı tipleriyle tarayıcı, yazı tipini yerel yazı tipi dizininizden çeker. Bu, bunların bilgisayarınızda zaten yüklü olan yazı tipleri olduğu anlamına gelir. Tüm bilgisayarlar önceden yüklenmiş yazı tipleriyle gelir ve bunlar web için güvenli kabul edilenlerdir. Abonenizin zaten onlara sahip olma olasılığı çok yüksek olduğundan, bunları kullanmak güvenlidir.

Dezavantajı, web yazı tiplerine kıyasla sınırlı sayıda web güvenli yazı tipi olmasıdır. Ve oldukça sık kullanılırlar, bu nedenle öne çıkma olasılığınız daha düşüktür (eğer hedeflediğiniz buysa).

Bariz web güvenli yazı tipleri şunlardır:

Arial
Helvetica
Verdana
Gürcistan
Times New Roman

Ancak, belirli bir güvenle kullanabileceğiniz birkaç tane daha var. Bu nedenle, standart Arial veya Helvetica yazı tipi döngüsünden çıkın ve markanız için uygun, web için güvenli bir yazı tipi bulun.

Web için güvenli yazı tipleri için bulduğum en iyi kaynak CSS Yazı Tipleri. Her yazı tipi için PC'ler ve Mac'ler için bir kullanım yüzdesi içermelerine bayılıyorum, böylece yaklaşık olarak kaç abonenizin istediğiniz yazı tipini görebileceğini ve bunun yerine kaç tanesinin sizin yedeğinizi göreceğini bilirsiniz.

Web yazı tipleri

Web yazı tipleri bir sunucudan alınır; kendiniz barındırdığınız veya harici bir sunucudan (Google veya Adobe gibi). Bu nedenle, kullanılabilecek yazı tipi çeşitliliği çok daha fazladır ve tarayıcı veya e-posta istemcisi yazı tipini çekebildiği sürece herhangi bir bilgisayarda kullanılabilirler. Bazı durumlarda, abonenizin zaten bir web sitesi olabilir. Bu yazı tipleri, web yazı tiplerini desteklemeyen e-posta istemcilerinde bile çalışacaktır!

Bu nedenle, web yazı tipleri size çok daha fazla çeşitlilik ve yaratıcı özgürlük sağlarken, bir bedeli vardır: sınırlı e-posta istemcisi desteği (buna daha da derinden daldım).

Neden web yazı tipleri?

Merak edebilirsiniz, neden web yazı tipleriyle uğraşıyorsunuz? Bir pazarlamacı ve tasarımcı olarak, renkler, tasarım ve evet tipografi ile e-postada markada kalma baskısını bilirsiniz. Web yazı tipleri, metniniz için resimlere güvenmeden markanızı sergilemenize olanak tanır.

Önemli kopyaları görsellere kilitlemek, marka üzerinde kalmanın ve yaratıcı olmanın bir yolu olarak e-posta tasarımında standart bir uygulama olmuştur. Ancak görüntülerdeki metni "gizlemek" e-postanın erişilebilirliğini sınırlar çünkü ekran okuyucular görüntüdeki metni okuyamaz.

Resimli ve resimsiz web yazı tiplerinin Ace Hardware e-posta örneği — Web yazı tipi kullanırken resimli ve resimsiz e-posta

Resimli ve resimsiz web yazı tiplerinin Magic Spoon e-posta örneği — Resimlerde metin kullanırken resimli ve resimsiz e-posta

Ve resimlerinizde metin olması, resimlerin varsayılan olarak kapalı olması durumunda abone deneyimine zarar verir. Bu, abonelerinizin büyük bir kısmı olmayabilir, ancak birinin resimlerini kapatıp e-postanızı açıp açmadığını bilmenin gerçekten bir yolu yok. Öyleyse neden mümkün olan en geniş kitleye en iyi deneyimi sunmuyorsunuz?

Web yazı tipleri, tipografide yaratıcılığın yeni yollarını açarak e-posta tasarımcılarının yaratıcı ve erişilebilir olmasına ve markalarının görünümüne ve hissine bağlı kalmasına olanak tanır.

E-postada web yazı tiplerini kullanabilir miyim?

Henüz tahmin etmediyseniz, cevap evet! Ancak - e-postadaki her şeyde olduğu gibi - uyarılar var.

E-posta istemci desteği

Web yazı tipleri yalnızca bazı e-posta istemcilerinde çalışır ve desteklenmedikleri yerlerde yazı tipinin zarif bir şekilde geri gelmesini sağlamak için özen gösterilmelidir.

E-posta istemcisi	Web yazı tipi desteği
elma postası	✓ Evet
Görünüm 2007-2016	✘ Hayır
görünüm 2019	✘ Hayır*
Mac için Outlook	✓ Evet
Outlook Office 365	✘ Hayır*
Gmail Uygulaması	✘ Hayır*
iOS	✓ Evet
Outlook Uygulaması	✘ Hayır
Samsung Posta	✘ Hayır*
AOL Postası	✘ Hayır
Gmail	✘ Hayır*
Ofis 365	✘ Hayır
Outlook.com	✘ Hayır
Yahoo! Posta	✘ Hayır

*Daha sonra tartışılacak olan e-posta yerleştirme yöntemine bağlı olarak bazı hatalı sonuçlara sahiptir.

Web yazı tiplerini destekleyen bir e-posta istemcisinde e-postalarınızı kaç kişinin görüntülediğini görmek için abone tabanınıza bir göz atmaya değer. Yeterince aboneniz varsa, e-postanıza ek bir dokunuş katmanın harika bir yolu.

Çoğunluk değilse, özellikle ücretli bir web yazı tipi kullanmayı düşünüyorsanız, zamanınıza ve emeğinize değmez.

Abonelerinizin Hangi e-posta istemcileri kullanıyorsunuz?

Abonelerinizin e-postalarınızı nerede açtığını ve nasıl etkileşim kurduklarını Litmus Email Analytics ile öğrenin. E-postalarınızı ve daha fazlasını optimize etmek için ihtiyaç duyduğunuz bilgileri edinin.

Daha fazla bilgi edinin →

lisanslama

Web yazı tipleri başlangıçta yalnızca web sitelerinde kullanılmak üzere tasarlanmıştır, bu nedenle lisansları genellikle yalnızca web sitelerinde ve mobil uygulamalarda kullanım içindir. Birçok web yazı tipi hizmetinin e-postada kullanılmasına izin vermemesinin nedeni, yazı tipini dağıtıyor olarak görülmesidir, bu da birçok hizmetin Son Kullanıcı Lisans Sözleşmesine (EULA) aykırıdır.

İletişim kurduğumuz tüm web yazı tipi sağlayıcıları, yazı tiplerini e-postada kullanarak destekledi. Her sağlayıcının gerekli olan farklı bir lisansı vardı, bu nedenle yazı tiplerinin e-postayla lisanslanmasının standart bir yolu yoktur. Bir yazı tipi kullanmak istiyorsanız, yazı tiplerini tam olarak nasıl lisansladıklarını öğrenmek için şirkete ulaşın.

Web yazı tiplerini nerede bulabilirim?

Yani her şeyi düşündünüz ve web yazı tiplerine bir şans vermeye karar verdiniz. Görünüşte sonsuz seçeneklerle markanıza uygun olanı bulabilirsiniz. Ancak erişilebilirliği akılda tutmak da önemlidir.

Bazı yazı tiplerinin okunması diğerlerinden daha kolaydır.

Gösterişli veya el yazısı yazı tipleri gibi süslü veya dekoratif yazı tipleri, görme bozukluğu veya disleksi olan kişilerin harf şekilleri arasındaki farkı anlamasını zorlaştırabilir. Sans-serif yazı tipleri (harflerinde Arial, Calibri, Century Gothic veya Helvetica gibi genişletilmiş özellikler veya kıvrımlar olmayan yazı tipleri) ve levha yazı tipleri (Museo Slab ve Rockwell gibi daha kalın çizgili yazı tipleri) daha erişilebilir olarak kabul edilir.

İşte aramaya başlamak için birkaç iyi yer.

Google Yazı Tipleri

Kullanılabilir bir sürü web yazı tipi hizmeti var, ancak Google Yazı Tipleri bizim favorimiz. Hizmet tamamen ücretsizdir ve Adobe Photoshop, Sketch veya başka bir tasarım yazılımındaki tasarımları taklit ediyorsanız, web yazı tiplerini bilgisayarınıza indirebilirsiniz.

Adobe Yazı Tipleri

Typekit, Ekim 2018 itibarıyla Adobe Fonts oldu. Artık fontları web fontları olarak kullanmak için hem <link> hem de @import yöntemini destekliyorlar (daha fazlası için). Hizmet tamamen ücretsiz değildir, ancak herhangi bir Creative Cloud aboneliğiniz varsa buna dahildir.

Web yazı tipi hizmetleri

Ücretli olarak kullanılabilen birkaç başka web yazı tipi hizmeti vardır. Bunları e-postanızda kullanmak için doğru lisansı aldığınızdan emin olmanız gerekir.

Ağ Türü (Web Lisansı)
Proses Tipi Döküm (Web Lisansı)
Optimo (Dijital Reklam Lisansı)
Fontspring (Özel E-posta Lisansı)
Tipotek (Web Lisansı)
Üretim Türü (Online Reklam Lisansı)
MyFonts (Web Lisansı)
Ticari Tip (Web Lisansı)

Web lisanslarında, yazı tipini kendiniz barındırma veya yazı tipini sağlayıcı tarafından barındırma seçeneği olabilir. Bazı web lisanslarında, yazı tipi sayımını sayfa görüntüleme olarak yükleyen her e-posta ile belirli bir sayfa görüntüleme sayısı için ödeme yaparsınız, bu nedenle bir lisans satın alırken bunu göz önünde bulundurduğunuzdan emin olun.

E-postalara web yazı tipleri nasıl gömülür?

Web yazı tipleri genellikle birinin yerel cihazında bulunmadığından ve bunun yerine başka bir yerde barındırıldığından, onları gerçekten kullanmadan önce web yazı tipinizi e-postalarınıza "gömmeniz" veya içe aktarmanız gerekir.

1. Yazı tipi dosyanızın URL'sini alın

E-postanıza çağırmak için web yazı tipinizin URL'sine ihtiyacınız olacak. Web yazı tipi hizmetiniz bu URL'ye sahip olmalıdır. Ancak yazı tipi dosyasını kendiniz barındırıyorsanız, web yazı tipinin sunucunuzda bulunduğu URL'yi alın. Genel bir URL olduğundan ve yerel bir sunucudan gelmediğinden emin olun. Aksi takdirde aboneleriniz web yazı tipine erişemez ve bunun yerine bir yedek yazı tipi görür.

Google Fonts kullanıyorsanız, URL'yi bulmak biraz zor ama çok da zor değil. @font-face gömme yöntemi için sonraki adımda nasıl yapılacağını öğrenin.

2. Üç yöntemden birini kullanarak web yazı tipini içe aktarın

Web yazı tiplerini e-postaya gömmek için üç yöntem vardır (ve hangi yöntemi kullanabileceğinizi sınırlayabilecek bir uyarı). Yazı tipinizi gömmenin üç yöntemi şunlardır:

<bağ>
@içe aktarmak
@ yazı tipi-yüz

Öyleyse neden bir yöntemi diğerine tercih edesiniz?

@import yöntemi, içe aktarılan web yazı tipinin yüklenmesini, gömülü olduğu HTML tamamen yüklenene kadar erteler. Bu, e-postanın geri kalanı yüklenirken web yazı tipinizin e-postanızda görünmesinin biraz daha uzun sürmesine neden olabilir. Tersine, <link> yöntemi, HTML dosyasının kodu okunurken (yukarıdan aşağıya) kaynağı satır içi olarak yükler; bu, web yazı tipi dosyanız özellikle büyükse e-postanızın yüklenmesini geciktirebilir.

Kullanılacak bir yöntem seçerken akılda tutulması gereken bir diğer şey, ESP'nizin desteklediği şeydir.

Litmus'ta gün boyu çalışan güzel kodlar oluşturabilirsiniz, ancak ESP'niz kodunuzu değiştirirse, bildiğimiz gibi, çoğunuzun yaptığı gibi, yaptığınız hiçbir şeyin önemi kalmaz. ESP'nizin kodunuzu, yazı tiplerinizin çalışmayı durdurmasına neden olacak şekilde değiştirmediğinden emin olun. Litmus'ta, ESP'miz stil öğelerinin etrafına MSO şartlarını dahil etmemize izin vermiyor. Bu nedenle <link> ve @import yöntemleri, aşağıda daha ayrıntılı tartışacağımız Outlook'ta iyi desteklenmedikleri için bizim için çalışmayacaktır.

<link> kullanma

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

@import kullanma

@import yöntemi de nispeten basit bir yöntemdir. Bu kod satırını e-postanızın <head> bölümüne <style> etiketleri arasına yerleştirin:

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

@font-face kullanma

Çevrimiçi web yazı tipi hizmetleri genellikle aralarından seçim yapabileceğiniz beş dosya biçimi sunar: .eot, .woff, .woff2, .svg ve .ttf. .woff ve .woff2 biçimleri e-posta söz konusu olduğunda en iyi desteğe sahiptir, bu nedenle mümkün olduğunda bu biçimlerden birini veya her ikisini kullanmanızı öneririz. @font-face yöntemi, içe aktarmak istediğiniz dosya biçimini özel olarak seçmenize olanak tanıyan tek yöntemdir, bu da onu web yazı tiplerini uygulamak için en kurşun geçirmez yöntem haline getirir.

Seçtiğimiz web fontu hizmeti olarak Google Fonts'u kullanarak bir web fontunu e-postaya aktarmak için tipik bir @font-face bildirimi:

@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 kullanıyorsanız, @font-face kodunu bulmak en kolay yol değildir, ancak çok da zor değildir.

Öncelikle, Google Font'ta kullanmak istediğiniz yazı tipini bulmalısınız. Ardından, kullanmak istediğiniz stili seçin. Sağ tarafta bir açılır menü görünecektir.

googe_fonts

Açılır menüde <link> veya @import için bir seçim olacaktır. Bunların her ikisinin de bir URL'si olacaktır (yukarıdaki ekran görüntüsünde vurgulanmıştır). Google'ın kullandığı CSS stil sayfasını bulmak için bu URL'yi kopyalayabilir ve tarayıcınızın adres çubuğuna yapıştırabilirsiniz.

google_font_api

@font-face'in 'latin' sürümünü kopyalayıp <style> etiketleriniz arasına yapıştırın.

Litmus'ta, @font-face yöntemi, web yazı tiplerini e-postalarımıza içe aktarma uygulamamızdır.

Bu web yazı tiplerini içe aktarma yönteminin tüm kredisi, geçmiş bir Type: E haber bülteninde ayrıntılı olarak açıklandığı gibi, e-posta erişilebilirlik savunucusu Paul Airy'ye aittir.

3. Doğru yedek yazı tipini seçin

Web yazı tiplerini kullanırken, web yazı tiplerini desteklemeyen e-posta istemcileri için yedek web güvenli yazı tipine sahip olmak bir zorunluluktur.

Yazı tipi ailesi yığınında listelenen yazı tipi kullanılamıyorsa, her e-posta istemcisinin varsayılan bir yazı tipi vardır. Örneğin, Gmail Arial'i, Apple Mail Helvetica'yı ve Outlook Times New Roman'ı kullanır. Bu varsayılan yazı tiplerinden herhangi birinin sesini beğenmediyseniz, iyi haberlerimiz var; yazı tipi ailesi yığınında kod yazarken yedek yazı tipinizi seçebilirsiniz (bir sonraki adımda).

E-postanızın tasarımını koruyan doğru yedek yazı tipini seçmek, hangi e-posta istemcisini kullanıyor olurlarsa olsunlar tüm abonelerinize harika bir deneyim sunmanın anahtarıdır.

Yedek yazı tipleri, web yazı tipiyle aynı türde olmalıdır; web yazı tipiniz sans-serif yazı tipiyse bir sans-serif yedek yazı tipini ve web yazı tipiniz de bir serif yazı tipiyse bir serif yedek yazı tipini kullanın. Aynı yazı tipi stilini kullanmak, e-postanızın tasarımını farklı e-posta istemcilerinde korumanıza yardımcı olur.

Yazı tiplerinin x yüksekliğini analiz ederek bir adım daha ileri götürebilirsiniz.

X yüksekliği, yazı tipinin dikey yüksekliğidir. İdeal olarak, yedek yazı tipi kullanımdayken e-posta tasarımınızın dağılmasını önlemek için benzer x yüksekliğine sahip bir yedek yazı tipi seçmelisiniz.

verdana, arial ve proxima nova'yı karşılaştıran x yüksekliği örneği

Verdana, Arial ve web yazı tipi Proxima Nova arasındaki ince x yüksekliği farklılıklarına bir örnek. Bu ince farklar, web yazı tipleri oluşturulmadığında e-posta tasarımınızı oluşturma veya bozma konusunda tüm farkı yaratabilir.

4. Yazı tiplerinizi e-postada kullanın

Web yazı tipiniz içe aktarıldıktan ve yedekleriniz seçildikten sonra, bunları e-postada kullanmak, web için güvenli bir yazı tipi kullanmak kadar kolaydır. İçe aktarma yönteminde tanımlanan font ailesi adını ve ardından CSS satır içi veya head'de yedek font(lar)ınızı kullanın:

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

Bunu, tercih edilen yazı tiplerinin öncelikli bir listesi olarak düşünün. Bir e-posta istemcisi bir numaralı tercihinize uymazsa, listenizdeki bir sonrakine geri döner.

Örneğin, yukarıdaki yazı tipi ailesi yığınını kullanan Gmail, Gmail'de desteklenmeyen bir web yazı tipi olduğu için listedeki ilk yazı tipini yok sayar. Yani işlenen yazı tipi Verdana olacaktır. Kullanılan cihazda Verdana desteklenmiyorsa (bu, Verdana web için güvenli bir yazı tipi olduğundan çok nadir görülür), cihaz, listedeki üçüncü yazı tipi olduğundan, sistemi için varsayılan sans-serif yazı tipini kullanır.

5. Sahte kalın veya sahte italik yazılardan kaçının

Web yazı tipi dosyalarınızın eşlik eden kalın ve italik sürümleri varsa, onları kullanalım!

Yazı tipi tasarımcıları, bir yazı tipinin tüm farklı stillerini tam olarak doğru bir şekilde elde etmek için çok fazla düşünce ve çaba harcadılar, bu nedenle e-posta istemcisinin veya tarayıcının rastgele bir sahte kalın veya sahte italik uygulamasına izin vermek yerine orijinal yazı tasarımını uygulamak en iyi uygulamadır. normal yazı tipi.

Temel olarak, bunu YAPMAYIN:

@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;"

Web tasarımında olduğu gibi, aşağıdaki gibi @font-face yığınınıza bu stilleri ekleyerek orijinal yazı tiplerini çekebilirsiniz:

@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');
}

Gördüğünüz gibi, farklı stiller, yazı tipi ailesinden bağımsız olarak farklı yazı tiplerini çeker. Bu şekilde, yazı tipinizi HTML'de şöyle biçimlendirirseniz:

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

…o zaman orijinal 'Roboto-BoldItalic' yazı tipini çekecektir! Aynı şekilde, sadece yazı tipi ağırlığını ekleyerek: kalın; 'Roboto-Bold'u çeker ve sadece yazı tipi stili ekler : italik; 'Roboto-İtalik' çekecek.

Bunu da YAPMAYIN!

Öyleyse, merak ediyor olabilirsiniz - neden her stil için orijinal yazı tiplerini de çeken farklı bir yazı tipi ailesi bildirmek yerine bunu böyle yapıyorsunuz? Bu nasıl görünüyor:

@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;"

Bu bir sorun sunuyor. Mağaza stilleri font-family isimlerini kullanarak sadece yaratır sizin geri dönüşün için. So tekme eğer aşırı karmaşık ve gereksiz CSS, ama aynı zamanda stil ve metin şeritler Örneğin eğer Gmail'de yukarıdaki kodu (doesn görüntülüyorsunuz' t destek özel web yazı tipleri), o zaman sadece görme olacak un-kalın, un-italik yerine Roboto Kalın italik ait Verdana.

Yazı tipi ailenizi ve yazı tipi ağırlıklarınızı veya yazı tipi stillerinizi ayrı tutarak, yedek yazı tipleriniz doğru stili korumaya devam edecektir.

6. Outlook için bir düzeltme kullanın

Outlook'un dikkat etmek isteyeceğiniz harika bir tuhaflığı var. Özellikle abonelerinizin çoğu bunu kullanıyorsa.

E-postalarınızın Outlook'ta nasıl göründüğünü ve daha fazlasını görün

Her e-posta istemcisinin tuhaflıkları vardır. Neyse ki, Litmus E-posta Önizlemeleri ile gönder düğmesine basmadan önce bunları e-postalarınızda görebilirsiniz. Artık bozuk e-posta yok.

Nasıl yapılacağını öğrenin →

Bunun için en basit düzeltme @font-face yöntemini kullanmaktır. Ancak, <link> veya @import yöntemini kullanmanız gerekiyorsa, stillerinizin bu bölümünü yorumlamak için Microsoft Office (MSO) koşul ifadelerini kullanın. Bu, Outlook'un bunları görmesini engeller ve yedek yazı tiplerinizi amaçlandığı gibi kullanır:

MSO koşulları olmadan	MSO koşullu
`<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]-->`

Ama bir dakika bekle. Outlook 2019'dan önce her şeyi söyledim. Peki Outlook 2019'da (ve Outlook Office 365'te) ne oluyor? Eh, bu e-posta istemcilerinde, Outlook, MSO koşulları olmadan bile geri dönüşünüze geri döner.

MSO koşulları olmadan	MSO koşullu
`< 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]-->`

Aslında, bu istemcilerde @import gerçekten işe yarıyor gibi görünüyor! Ama gerçekten öyle mi? Diğer yazı tipleriyle denedik ve sonuçlar Outlook'tan beklediğinizle hemen hemen aynıydı:

Outlook'ta web yazı tiplerini test etme

Bazen belirttiğiniz yazı tipleri yerine bir sistem yazı tipini koyuyor gibi görünüyor. Ve Montserrat örneğinde, orada neler olduğundan tam olarak emin değilim, ama bu Montserrat değil. Aslında daha çok Lato'ya benziyor. Görünüşe göre Outlook web yazı tiplerini desteklemeye çalışıyor, ancak henüz tam olarak orada değil. Kesinlikle gelecekte dikkat edilmesi gereken bir şey.

Bu arada, yukarıdaki nedenlerle ve yalnızca Outlook 2019'u hedefleyemeyeceğiniz için en iyisi @font-face kullanmak veya <link> veya @import bildirimlerinizi gizlemek.

Outlook'un yazı tipinizi Times New Roman'a dönüştürdüğünü görürseniz, mso-font-alt: 'Arial'; Outlook için alternatif bir geri dönüş sağlamak için @font-face bloğuna:

@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');
}

Kullanabileceğiniz başka bir çözüm, yazı tipi ailesini web için güvenli yazı tipi yığınıyla satır içinde kodlamak ve yazı tiplerini web yazı tipiyle geçersiz kılmak için bir <style> bloğu eklemektir. O zaman sadece bu stil bloğunu Outlook'tan gizleme meselesi:

<!--[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 için de bir düzeltme kullanın (şaka yapıyorum, bir düzeltme yok)

Bu yüzden merak ediyor olabilirsiniz, “Peki ya Gmail? Ne de olsa Google Fonts kullanıyoruz.”

Gmail'in bir Google ürünü ve Google Fonts'un bir Google ürünü olduğunu düşünürsünüz, birlikte güzel bir şekilde oynayacaklarını düşünürdünüz. Ama ne yazık ki, durum böyle değil.

Web yazı tipleri, bir Google Yazı Tipi olsalar ve Google tarafından sağlanan kodu kullansanız bile Gmail'de çalışmaz. Bunun tek istisnası Roboto'dur:

Farklı Google Yazı Tiplerini Kullanma	Farklı gömme yöntemleri kullanma

Ve aslında, Android'deki Gmail Mail Uygulamasında, tüm sans-serif yazı tipleri Roboto'ya geri döner:

Farklı Google Yazı Tiplerini Kullanma	Farklı gömme yöntemleri kullanma

Başlamanız için biraz ilham

Pekala, şimdi kim web yazı tiplerini e-postada doğru şekilde kullanan birkaç harika marka örneğini görmeye hazır?

Ace Hardware, desteklendikleri yerlerde web yazı tiplerini kullandı, ancak e-postanın diğer e-posta istemcilerinde hala marka olarak görünmesini sağlamak için bir yedek levha yazı tipi olarak Rockwell'i seçti.

Web yazı tipleriyle	geri dönüşlerle

Webflow, web yazı tipleri için yedek olarak sistem yazı tiplerini kullanır ve hangi yazı tipi görünürse görünsün harika bir tipografik deneyim sağlamak için yazı tipi ağırlıklarını kullanır.

web akışı e-postası

Markaya sadık kalın ve hatasız olun

Web yazı tipleri, e-postalarınızdaki metni hem markalı hem de erişilebilir tutmanın harika bir yoludur. Ancak bu gönderiden de görebileceğiniz gibi, dikkate alınması gereken birçok nüans var. Bu yüzden eşit derecede önemli…

Her zaman test olun!

Bir sürü farklı durumu test etmek için elimizden gelenin en iyisini yaptık, ancak ESP'niz kodunuzu beklenmedik bir şekilde bozabilir. Tüm yedeklerinizin düzgün çalıştığından emin olmak için göndermeden önce e-postalarınızı test ettiğinizden emin olun.

E-postalarınızdaki QA testi web yazı tipleri

doğru mu yaptın Litmus'un ücretsiz deneme sürümüyle öğrenin. 90'dan fazla e-posta istemcisinde, uygulamasında ve cihazda e-postalarınızın nasıl göründüğünü önizleyin. Ve kusursuz e-postalarla marka itibarınızı koruyun.

Ücretsiz Litmus denemenizi başlatın →

Abonelerinize gelen kutularında en iyi deneyimi sağlamanıza yardımcı olacak büyük bir aşamalı geliştirme olarak web yazı tipleri eklemek buna değer. İyi eğlenceler! Ve aşağıda herhangi bir sorunuz veya yorumunuz varsa bize bildirin.

İlk olarak 11 Nisan 2019'da Jaina Mistry tarafından yayınlandı. Son güncelleme 23 Nisan 2021.