Font Web: Cara Membuatnya Bekerja dengan Sempurna di Email

Diterbitkan: 2021-04-24

Dari penelitian saya yang sangat ilmiah (saya mengamati putri saya ketika dia mulai menulis laporan selama setahun terakhir ini), saya telah belajar bahwa salah satu aspek pertama dari desain yang mulai dimainkan orang adalah tipografi. Saat pertama kali mulai menulis laporan, Anda menghabiskan waktu berjam-jam untuk mencari tahu font terbaik untuk digunakan. Oke, mungkin tidak berjam-jam, tetapi kebanyakan orang menghabiskan sedikit waktu untuk itu. Karena, seperti yang diketahui merek besar, tipografi itu penting. Dan itu penting dalam email.

Tetapi aksesibilitas juga penting. Jadi berhentilah menjebak pesan Anda dalam gambar, dan mulailah menggunakan teks langsung dengan font aman web dan font web sebagai gantinya. Lagi pula, teks yang tidak bergantung pada gambar dan dapat dibaca oleh audiens yang lebih luas menghasilkan pengalaman pelanggan yang luar biasa. Dan karena pelanggan terbaik Anda—email menghasilkan $36 untuk setiap $1 yang diinvestasikan—itu bagus untuk keseluruhan strategi pemasaran Anda.

Dalam posting blog ini, saya akan menguraikan:

Font web vs. font aman web
Manfaat font web
Dukungan dan lisensi klien email
Di mana menemukan font web
Mengkodekannya ke dalam email
Contoh font web yang bagus di email

Font web vs. font aman web

Ada dua cara berbeda yang dapat Anda lakukan untuk teks langsung: font aman web dan font web. Meski terdengar sama, namun ada perbedaan yang pasti. Untuk memahami perbedaan ini, mari kita lihat cara kerja font di email Anda.

Saat email Anda dikodekan, font dideklarasikan menggunakan properti CSS yang disebut font-family. Properti font-family ini hanya dapat memiliki satu nama font atau beberapa nama font—sering disebut sebagai tumpukan font. Menyertakan beberapa nama font memastikan bahwa jika satu font tidak berfungsi, ada font cadangan atau cadangan yang Anda pilih. Tanpa mencantumkan beberapa nama font, klien email dapat memutuskan font cadangan Anda. Saat pelanggan Anda membuka email Anda, browser membaca properti font-family dan menarik font untuk digunakan.

Font aman web

Dengan font aman web, browser menarik font dari direktori font lokal Anda. Itu berarti ini adalah font yang sudah terinstal di komputer Anda. Semua komputer dilengkapi dengan font pra-instal, dan inilah yang dianggap aman untuk web. Mereka aman untuk digunakan karena ada kesempatan benar-benar baik pelanggan Anda sudah akan memiliki mereka juga.

Kelemahannya adalah jumlah font web safe yang terbatas dibandingkan dengan font web. Dan mereka cukup sering digunakan, jadi Anda cenderung tidak menonjol (jika itu yang Anda tuju).

Font aman web yang jelas adalah:

Arial
Helvetica
Verdana
Georgia
Times New Roman

Tetapi ada beberapa yang lain di luar sana yang dapat Anda gunakan dengan tingkat kepercayaan tertentu. Jadi keluarlah dari lingkaran font Arial atau Helvetica standar, dan temukan font aman web yang sesuai untuk merek Anda.

Sumber daya terbaik yang saya temukan untuk font aman web adalah Font CSS. Saya suka bahwa mereka menyertakan persentase penggunaan untuk PC dan Mac untuk setiap font sehingga Anda tahu kira-kira berapa banyak pelanggan Anda yang mungkin melihat font yang Anda inginkan dan berapa banyak yang akan melihat fallback Anda sebagai gantinya.

Font web

Font web diambil dari server—baik yang Anda host sendiri atau yang eksternal (seperti Google atau Adobe). Karena itu, variasi font yang dapat digunakan jauh lebih besar, dan dapat digunakan di komputer mana pun… selama browser atau klien email dapat memasukkan font tersebut. Dalam beberapa kasus, pelanggan Anda mungkin sudah memiliki web font diunduh dan diinstal pada mesin mereka, sehingga font ini akan berfungsi bahkan di klien email yang tidak mendukung font web!

Jadi, meskipun font web memberi Anda lebih banyak variasi dan kebebasan berkreasi, font tersebut dikenakan biaya: dukungan klien email terbatas (yang saya selami lebih jauh).

Mengapa font web?

Jadi Anda mungkin bertanya-tanya, mengapa repot-repot dengan font web sama sekali? Sebagai pemasar dan desainer, Anda tahu tekanan untuk tetap menggunakan merek dalam email dengan warna, desain, dan—ya—tipografi. Font web memungkinkan Anda memamerkan merek Anda tanpa bergantung pada gambar untuk teks Anda.

Mengunci salinan penting dalam gambar telah menjadi praktik standar dalam desain email sebagai cara untuk mempertahankan merek dan menjadi kreatif. Tetapi teks "menyembunyikan" dalam gambar membatasi aksesibilitas email karena pembaca layar tidak dapat membaca teks pada gambar.

Contoh email Ace Hardware dari font web dengan dan tanpa gambar — Email dengan dan tanpa gambar saat menggunakan font web

Contoh email Magic Spoon dari font web dengan dan tanpa gambar — Email dengan dan tanpa gambar saat menggunakan teks dalam gambar

Dan, memiliki teks dalam gambar Anda mengganggu pengalaman pelanggan jika mereka menonaktifkan gambar secara default. Ini mungkin bukan bagian besar dari pelanggan Anda, tetapi benar-benar tidak ada cara untuk mengetahui apakah seseorang mematikan gambarnya dan membuka email Anda. Jadi mengapa tidak memberikan pengalaman terbaik untuk audiens seluas mungkin?

Font web membuka jalan baru kreativitas dalam tipografi, memungkinkan desainer email menjadi kreatif dan mudah diakses—dan tetap berpegang pada tampilan dan nuansa merek mereka.

Bisakah saya menggunakan font web di email?

Jika Anda belum menebak, jawabannya adalah ya! Namun—seperti dalam semua hal email—ada peringatan.

Dukungan klien email

Font web hanya berfungsi di beberapa klien email, dan harus berhati-hati untuk memastikan bahwa jika tidak didukung, font akan kembali dengan anggun.

klien email	Dukungan font web
Apple Mail	Ya
Outlook 2007-2016	Tidak
Outlook 2019	Tidak*
Outlook untuk Mac	Ya
Outlook Office 365	Tidak*
Aplikasi Gmail	Tidak*
iOS	Ya
Aplikasi Outlook	Tidak
Samsung Mail	Tidak*
Surat AOL	Tidak
Gmail	Tidak*
Kantor 365	Tidak
Outlook.com	Tidak
Yahoo! Surat	Tidak

*Memiliki beberapa hasil miring tergantung pada metode penyematan email, yang akan dibahas nanti.

Sebaiknya lihat basis pelanggan Anda untuk melihat berapa banyak yang melihat email Anda di klien email yang mendukung font web. Jika cukup banyak pelanggan Anda, maka ini adalah cara yang bagus untuk memberikan sentuhan tambahan pada email Anda.

Jika sebagian besar tidak, itu tidak akan sepadan dengan waktu dan usaha Anda, terutama jika Anda mempertimbangkan untuk menggunakan font web berbayar.

Klien email mana yang digunakan pelanggan Anda ?

Cari tahu di mana pelanggan Anda membuka email Anda dan bagaimana mereka terlibat—dengan Litmus Email Analytics. Dapatkan wawasan yang Anda butuhkan untuk mengoptimalkan email Anda dan seterusnya.

Pelajari lebih lanjut →

Lisensi

Font web awalnya dirancang untuk digunakan hanya di situs web, jadi lisensinya biasanya hanya untuk digunakan di situs web dan aplikasi seluler. Alasan banyak layanan font web tidak mengizinkan penggunaan dalam email adalah karena terlihat sebagai pendistribusian font, yang bertentangan dengan banyak Perjanjian Lisensi Pengguna Akhir (End User License Agreement/EULA) layanan.

Semua penyedia font web yang kami hubungi didukung menggunakan font mereka di email. Setiap penyedia memiliki lisensi berbeda yang diperlukan, jadi tidak ada cara standar font dilisensikan dalam email. Jika Anda ingin menggunakan font, hubungi perusahaan untuk mengetahui dengan tepat bagaimana mereka melisensikan font mereka.

Di mana menemukan font web

Jadi Anda telah memikirkan semuanya dan memutuskan Anda ingin mencoba font web. Dengan opsi yang tampaknya tidak ada habisnya, Anda dapat menemukan yang sesuai dengan merek Anda. Tetapi penting juga untuk mengingat aksesibilitas.

Beberapa font lebih mudah dibaca daripada yang lain.

Font hiasan atau dekoratif, seperti font tampilan atau tulisan tangan, dapat mempersulit orang dengan gangguan penglihatan atau disleksia untuk membedakan antara bentuk huruf. Font sans-serif (font tanpa fitur tambahan atau ikal dalam hurufnya seperti Arial, Calibri, Century Gothic, atau Helvetica) dan font slab (font dengan garis yang lebih tebal seperti Museo Slab dan Rockwell) dianggap lebih mudah diakses.

Berikut adalah beberapa tempat bagus untuk mulai mencari.

Google Font

Ada banyak layanan font web yang tersedia, tetapi Google Font adalah favorit kami. Layanan ini benar-benar gratis, dan Anda dapat mengunduh font web ke komputer Anda jika Anda membuat desain dalam Adobe Photoshop, Sketch, atau perangkat lunak desain lainnya.

Font Adobe

Typekit telah menjadi Adobe Fonts pada Oktober 2018. Mereka sekarang mendukung metode <link> dan @import untuk menggunakan font sebagai font web (lebih lanjut tentang itu selanjutnya). Layanan ini tidak sepenuhnya gratis, tetapi jika Anda sudah memiliki langganan Creative Cloud, itu sudah termasuk dengan itu.

Layanan font web

Ada beberapa layanan font web lain yang tersedia secara berbayar. Anda harus memastikan bahwa Anda mendapatkan lisensi yang benar untuk menggunakannya di email Anda.

Jenis Jaringan (Lisensi Web)
Jenis Proses Pengecoran (Lisensi Web)
Optimo (Lisensi Iklan Digital)
Fontspring (Lisensi Email Kustom)
Typotheque (Lisensi Web)
Jenis Produksi (Lisensi Iklan Online)
MyFonts (Lisensi Web)
Jenis Komersial (Lisensi Web)

Dengan lisensi web, mungkin ada pilihan untuk meng-host font sendiri atau memiliki font yang di-host oleh penyedia. Di beberapa lisensi web, Anda membayar sejumlah tampilan halaman dengan setiap email yang memuat penghitungan font sebagai tampilan halaman, jadi pastikan Anda mempertimbangkannya saat membeli lisensi.

Cara menyematkan font web di email

Karena font web biasanya tidak ditemukan di perangkat lokal seseorang dan sebagai gantinya di-host di tempat lain, Anda harus "menyematkan" atau mengimpor font web Anda ke email Anda terlebih dahulu sebelum Anda benar-benar dapat menggunakannya.

1. Dapatkan URL file font Anda

Anda akan memerlukan URL font web Anda untuk memanggilnya ke email Anda. Layanan font web Anda harus memiliki URL ini. Tetapi jika Anda menghosting file font sendiri, dapatkan URL dari tempat font web berada di server Anda. Pastikan itu adalah URL publik dan tidak berasal dari server lokal. Jika tidak, pelanggan Anda tidak akan dapat mengakses font web dan sebagai gantinya akan melihat font cadangan.

Jika Anda menggunakan Google Font, menemukan URL sedikit rumit, tetapi tidak terlalu sulit. Cari tahu caranya di langkah selanjutnya untuk metode embed @font-face.

2. Impor font web menggunakan salah satu dari tiga metode

Ada tiga metode untuk menyematkan font web di email (dan peringatan yang dapat membatasi metode mana yang dapat Anda gunakan). Tiga metode untuk menyematkan font Anda adalah:

<tautan>
@impor
@font-wajah

Jadi mengapa Anda memilih satu metode di atas yang lain?

Metode @import menunda pemuatan font web yang diimpor hingga HTML yang disematkan dimuat sepenuhnya. Ini dapat menyebabkan font web Anda membutuhkan waktu lebih lama untuk muncul di email Anda, sementara sisa email dimuat. Sebaliknya, metode <link> memuat sumber daya sebaris saat kode file HTML dibaca (dari atas ke bawah), yang dapat menunda pemuatan email Anda jika file font web Anda sangat besar.

Hal lain yang perlu diingat ketika memilih metode yang akan digunakan adalah apa yang didukung ESP Anda.

Anda dapat membuat kode indah yang berfungsi di Litmus sepanjang hari, tetapi jika ESP Anda mengubah kode Anda, seperti yang kami tahu sebagian besar dari mereka melakukannya, maka tidak ada yang Anda lakukan akan menjadi masalah. Pastikan ESP Anda tidak mengubah kode Anda dengan cara yang akan menyebabkan font Anda berhenti bekerja. Di Litmus, ESP kami tidak mengizinkan kami menyertakan persyaratan MSO di sekitar elemen gaya. Jadi metode <link> dan @import tidak akan berfungsi untuk kami karena tidak didukung dengan baik di Outlook, yang akan kami bahas lebih lanjut di bawah.

Menggunakan <tautan>

Menggunakan metode <link> adalah metode yang relatif sederhana untuk menyematkan font di email Anda. Tempatkan baris kode ini di <head> email Anda, di dekat bagian atas:

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

Menggunakan @import

Metode @import juga merupakan metode yang relatif sederhana. Tempatkan baris kode ini di <head> email Anda di antara tag <style>:

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

Menggunakan @font-face

Layanan font web online biasanya menawarkan lima format file untuk dipilih: .eot, .woff, .woff2, .svg, dan .ttf. Format .woff dan .woff2 memiliki dukungan terbaik dalam hal email, jadi sebaiknya gunakan salah satu atau kedua format ini jika memungkinkan. Metode @font-face adalah satu-satunya metode yang memungkinkan Anda untuk secara khusus memilih format file apa yang ingin Anda impor, menjadikannya metode yang paling antipeluru untuk menerapkan font web.

Berikut adalah deklarasi @font-face khas untuk mengimpor font web ke email menggunakan Google Font sebagai layanan font web pilihan kami:

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

Jika Anda menggunakan Google Font, menemukan kode @font-face bukanlah yang termudah, tetapi juga tidak terlalu sulit.

Pertama, Anda harus menemukan font yang ingin Anda gunakan di Google Font. Kemudian, pilih gaya yang ingin Anda gunakan. Menu flyout akan muncul di sebelah kanan.

google_fonts

Di flyout, akan ada pilihan untuk <link> atau @import. Keduanya akan memiliki URL (disorot pada tangkapan layar di atas). Anda dapat menyalin URL itu dan menempelkannya di bilah alamat browser Anda untuk menemukan lembar gaya CSS yang digunakan Google.

google_font_api

Salin dan tempel versi 'latin' dari @font-face di antara tag <style> Anda.

Di Litmus, metode @font-face adalah implementasi masuk kami untuk mengimpor font web ke email kami.

Semua pujian untuk metode mengimpor font web ini diberikan kepada advokat aksesibilitas email Paul Airy, sebagaimana dirinci dalam buletin Type: E sebelumnya.

3. Pilih font fallback yang tepat

Saat menggunakan font web, Anda harus memiliki font aman web cadangan untuk klien email yang tidak mendukung font web.

Setiap klien email memiliki font default jika font yang tercantum di tumpukan font-family tidak tersedia. Misalnya, Gmail menggunakan Arial, Apple Mail menggunakan Helvetica, dan Outlook menggunakan Times New Roman. Jika Anda tidak menyukai suara salah satu font default ini, kami punya kabar baik—Anda dapat memilih font cadangan saat Anda membuat kode di tumpukan font-family (di langkah berikutnya).

Memilih font fallback yang tepat yang mempertahankan desain email Anda adalah kunci untuk menyajikan pengalaman hebat bagi semua pelanggan Anda, apa pun klien email yang mereka gunakan.

Jenis font fallback harus sama dengan font web—gunakan font fallback sans-serif jika font web Anda adalah font sans-serif, dan font fallback serif jika font web Anda juga merupakan font serif. Menggunakan gaya font yang sama akan membantu mempertahankan desain email Anda di klien email yang berbeda.

Anda dapat mengambil satu langkah lebih jauh dengan menganalisis x-height font.

X-height adalah tinggi vertikal font. Idealnya, Anda harus memilih font fallback yang memiliki tinggi x yang sama untuk mencegah desain email Anda berantakan saat font fallback digunakan.

contoh x-height membandingkan verdana, arial, dan proxima nova

Berikut adalah contoh perbedaan tipis x-height antara font Verdana, Arial, dan font web Proxima Nova. Perbedaan halus ini dapat membuat semua perbedaan dalam membuat atau menghancurkan desain email Anda saat font web tidak ditampilkan.

4. Gunakan font Anda di email

Setelah font web Anda diimpor dan fallback Anda dipilih, menggunakannya dalam email semudah menggunakan font web safe. Cukup gunakan nama font-family yang ditentukan dalam metode impor diikuti dengan font fallback Anda baik di inline CSS atau di kepala:

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

Anggap ini sebagai daftar font pilihan yang diprioritaskan. Jika klien email tidak dapat memenuhi pilihan nomor satu Anda, itu akan jatuh kembali ke yang berikutnya dalam daftar Anda.

Misalnya, menggunakan tumpukan font-family di atas, Gmail akan mengabaikan font pertama dalam daftar karena ini adalah font web yang tidak didukung di Gmail. Jadi font yang diberikan akan menjadi Verdana. Jika Verdana tidak didukung pada perangkat yang digunakan (yang akan sangat jarang terjadi karena Verdana adalah font yang aman untuk web), perangkat akan menggunakan font sans-serif default untuk sistemnya, karena ini adalah font ketiga dalam daftar.

5. Hindari faux bold atau faux italic

Jika Anda memiliki versi tebal dan miring dari file font web Anda, mari kita gunakan!

Perancang jenis huruf telah mencurahkan banyak pemikiran dan upaya untuk mendapatkan semua gaya font yang berbeda dengan tepat , jadi praktik terbaik untuk menerapkan desain jenis asli daripada membiarkan klien email atau browser secara sembarangan menerapkan huruf tebal palsu atau miring palsu ke font biasa.

Pada dasarnya, JANGAN lakukan ini:

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

Seperti desain web, Anda dapat menarik font asli dengan menyertakan gaya ini di tumpukan @font-face Anda, seperti:

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

Seperti yang Anda lihat, gaya yang berbeda menarik font yang berbeda terlepas dari keluarga font. Dengan cara ini, jika Anda menata font Anda dalam HTML seperti ini:

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

…maka itu akan menarik font 'Roboto-BoldItalic' asli ! Demikian juga, cukup tambahkan font-weight: bold; akan menarik 'Roboto-Bold' dan hanya menambahkan font-style: italic; akan menarik 'Roboto-Italic' .

JANGAN lakukan ini juga!

Jadi, Anda mungkin bertanya-tanya—mengapa melakukannya dengan cara ini daripada mendeklarasikan keluarga font yang berbeda untuk setiap gaya, yang juga menarik font asli? Begini tampilannya:

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

Ini menghadirkan masalah. Menggunakan nama font-family untuk menyimpan gaya tidak hanya membuat CSS yang terlalu rumit dan berlebihan, tetapi juga menghapus teks gaya Anda jika fallback Anda muncul. Jadi misalnya—jika Anda melihat kode di atas di Gmail (yang tidak t mendukung font web khusus), maka Anda hanya akan melihat Verdana yang tidak dicetak tebal dan tidak dicetak miring, bukan Roboto Bold Italic .

Dengan memisahkan font-family dan font-weight atau font-style Anda, font fallback Anda akan tetap mempertahankan gaya yang benar.

6. Gunakan perbaikan untuk Outlook

Outlook memiliki kekhasan luar biasa yang harus Anda waspadai. Terutama jika itu yang digunakan oleh banyak pelanggan Anda.

Lihat tampilan email Anda di Outlook dan lainnya

Setiap klien email memiliki kebiasaannya sendiri. Untungnya, Anda dapat melihatnya di email Anda sebelum menekan kirim—dengan Pratinjau Email Litmus. Tidak ada lagi email yang rusak.

Pelajari caranya →

Jika Anda menggunakan metode <link> atau @import, semuanya sebelum Outlook 2019 akan menampilkan Times New Roman terlepas dari fallback apa yang Anda masukkan untuk font Anda.

Perbaikan paling sederhana untuk ini adalah dengan menggunakan metode @font-face. Tetapi jika Anda perlu menggunakan metode <link> atau @import, gunakan persyaratan Microsoft Office (MSO) untuk mengomentari bagian gaya Anda tersebut. Ini akan mencegah Outlook melihat itu, dan itu akan menggunakan font cadangan Anda sebagaimana dimaksud:

Tanpa persyaratan MSO	Dengan persyaratan 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]-->`

Tapi tunggu sebentar. Saya baru saja mengatakan semuanya sebelum Outlook 2019. Jadi apa yang terjadi di Outlook 2019 (dan Outlook Office 365)? Nah, di klien email tersebut, Outlook kembali ke fallback Anda bahkan tanpa persyaratan MSO.

Tanpa persyaratan MSO	Dengan persyaratan 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]-->`

Faktanya, di klien tersebut, @import tampaknya benar-benar berfungsi! Tapi apakah itu benar-benar? Kami mencobanya dengan font lain, dan hasilnya setara dengan yang Anda harapkan dari Outlook:

menguji font web di outlook

Sepertinya terkadang ia memasukkan font sistem alih-alih font yang Anda tentukan. Dan dalam kasus Montserrat, saya tidak yakin apa yang terjadi di sana, tapi itu bukan Montserrat. Ini sebenarnya lebih mirip Lato. Jadi sepertinya Outlook mencoba mendukung font web, tetapi belum cukup. Itu pasti sesuatu yang harus diperhatikan di masa depan.

Sementara itu, untuk alasan di atas—dan karena Anda tidak dapat menargetkan hanya Outlook 2019—sebaiknya gunakan @font-face atau sembunyikan deklarasi <link> atau @import Anda.

Jika Anda menemukan Outlook mengonversi font Anda ke Times New Roman, Anda dapat menambahkan mso-font-alt: 'Arial'; ke blok @font-face untuk memberikan alternatif pengganti untuk 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');
}

Solusi lain yang dapat Anda gunakan adalah mengkodekan font-family dengan web safe font stack inline dan menyertakan blok <style> untuk menimpa font dengan font web. Maka itu hanya masalah menyembunyikan blok gaya itu dari 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. Gunakan perbaikan untuk Gmail juga (bercanda, tidak ada)

Jadi Anda mungkin bertanya-tanya, “Bagaimana dengan Gmail? Bagaimanapun juga, kami menggunakan Google Font.”

Anda akan berpikir bahwa karena Gmail adalah produk Google dan Google Font adalah produk Google, mereka akan bermain bersama dengan baik. Tapi sayang, bukan itu masalahnya.

Font web tidak berfungsi di Gmail meskipun itu adalah Google Font dan bahkan jika Anda menggunakan kode yang disediakan oleh Google. Satu-satunya pengecualian untuk ini adalah Roboto:

Menggunakan Font Google yang berbeda	Menggunakan metode penyematan yang berbeda

Dan faktanya, di Aplikasi Gmail Mail di Android, semua font sans-serif kembali ke Roboto:

Menggunakan Font Google yang berbeda	Menggunakan metode penyematan yang berbeda

Beberapa inspirasi untuk Anda mulai

Baiklah, sekarang siapa yang siap untuk melihat beberapa contoh merek yang luar biasa menggunakan font web di email dengan cara yang benar?

Ace Hardware menggunakan font web yang didukung, tetapi memilih Rockwell sebagai font fallback slab untuk memastikan email tetap terlihat pada merek di klien email lain.

Dengan font web	Dengan fallback

Webflow menggunakan font sistem sebagai cadangan untuk font web mereka dan menggunakan bobot font untuk memastikan pengalaman tipografi yang hebat, apa pun font yang muncul.

email alur web

Tetap pada merek dan bebas dari kesalahan

Font web adalah cara yang bagus untuk menjaga teks dalam email Anda bermerek dan dapat diakses. Tetapi seperti yang Anda lihat dari posting ini, ada banyak nuansa yang perlu dipertimbangkan. Itu sebabnya sama pentingnya untuk…

Selalu jadi ujian!

Kami telah melakukan yang terbaik untuk menguji banyak keadaan yang berbeda, tetapi ESP Anda mungkin mendistorsi kode Anda dengan cara yang tidak terduga. Pastikan untuk menguji email Anda sebelum mengirimnya untuk memastikan semua fallback Anda berfungsi dengan baik.

QA menguji font web di email Anda

Apakah Anda melakukannya dengan benar? Cari tahu dengan uji coba gratis Litmus. Pratinjau tampilan email Anda di lebih dari 90 klien email, aplikasi, dan perangkat. Dan pertahankan reputasi merek Anda dengan email yang sempurna.

Mulai uji coba gratis Litmus →

Menambahkan font web layak dilakukan sebagai peningkatan progresif yang hebat untuk membantu Anda memberikan pengalaman terbaik bagi pelanggan Anda di kotak masuk mereka. Selamat bersenang-senang! Dan beri tahu kami jika Anda memiliki pertanyaan atau komentar di bawah.

Awalnya diterbitkan pada 11 April 2019, oleh Jaina Mistry. Terakhir diperbarui 23 April 2021.