Почему мои веб-шрифты больше не работают в почтовом клиенте iOS?
Несколько месяцев назад мои веб-шрифты перестали работать в почтовом клиенте iOS. Я не единственный, кто испытал это.
Код, который я использую, таков:
<link rel = "stylesheet" id = "magazine-font-aleo-css" href = "https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo.css" type = "text/css">
Вы можете просмотреть полученный CSS для себя, но вот выдержка:
@font-face {
font-family: 'Aleo';
src: url('aleo/Aleo-Regular-webfont.eot');
src: url('aleo/Aleo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('aleo/Aleo-Regular-webfont.woff2') format('woff2'),
url('aleo/Aleo-Regular-webfont.woff') format('woff'),
url('aleo/Aleo-Regular-webfont.ttf') format('truetype'),
url('aleo/Aleo-Regular-webfont.svg#aleoregular') format('svg');
font-weight: normal;
font-style: normal;
}
Затем шрифт применяется в теге body.
<body style = "background-color:#f0f0f0; color:#333; font-family:Aleo, serif; font-size:18px; font-weight:400; line-height:1.625;margin:0;">
Я не могу найти никакой документации о том, что изменилось в iOS. Я был бы рад получить ответы, которые либо (а) объяснят мне, в чем проблема, либо (б) дадут совет, как я могу диагностировать проблему.
Ответы 1
Пара вещей, которые вы могли бы попробовать:
1. Ветка Litmus, на которую вы ссылаетесь, предлагает использовать @import вместо <link> для ссылки на файлы шрифтов. Так:
<style>
@import url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo.css);
</style>
2. Недавно мне удалось заставить веб-шрифты отображаться в iOS Mail с помощью тега <link>, но мой код выглядит так:
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<!--<![endif]-->
<!--[if !mso]><!-->
<link href = "https://fonts.googleapis.com/css?family=Roboto+Slab:700" rel = "stylesheet">
<!--<![endif]-->
Это скрывает тег <link> от Outlook, который, кажется, задыхается от него и вызывает проблемы. Я только что проверил это в Litmus, и он отображает веб-шрифт.
Еще одна вещь, которую нужно проверить с вашим исходным кодом, — это переместить и жестко закодировать полные URL-адреса.
<style>
@import url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo.css);
@font-face {
font-family: 'Aleo';
src: url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.eot');
src: url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.woff2') format('woff2'),
url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.woff') format('woff'),
url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.ttf') format('truetype'),
url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.svg#aleoregular') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
Кажется, у вас нет ссылки на шрифт в вашей электронной почте. В CSS его тоже нет.