Как подключить шрифт с другого домена (как это делает google fonts)?

Question

[tripcollor]

Нужно сверстать письмо с нестандартным шрифтом которого нет в google fonts, думал получится на сделать что то подобное самому, но не прокатило.
Что я сделал: я загрузил сами шрифты и стили @font-face к себе на домен и подключался в html к ним таким образом (ссылка рабочая):

<link href="http://kangoroom.ru/MuseoSansCyr/stylesheet.css" rel="stylesheet">

по этой ссылке можно посмотреть как я прописал все @font-face , пути к шрифтам я сделал таким образом

url('http://kangoroom.ru/MuseoSansCyr/MuseoSansCyrl-700.woff2')

В стилях я задаю семейство шрифта, но ничего не происходит
font-family: 'MuseoSansCyrl-500';
Подсказите что я сделал не так или как можно сделать, чтобы работало

Comments

[iBird Rose]

попробуй прописать kangoroom.ru/MuseoSansCyr/stylesheet.css напрямую в < style >

[tripcollor]

iBird Rose, не помогает я пробовал

Answer 1

[Алексей Уколов]

Большинство email-клиентов просто проигнорируют ваш внешний css-файл. Добавьте правила прямо в html, как при обычной вёрстке писем.
Также шрифты нужно перенести на протокол HTTPS, добавить корректный SSL-сертификат и убедиться, что на сервере настроены корректные cross-origin-заголовки.

Comments

[tripcollor]

Алексей Уколов: я спрашивал про подключение шрифтов, а не про верстку писем ..

[Алексей Уколов]

Вы подключаете шрифт во внешнем css-файле. Вы правда не видите связи между вашей проблемой и моим ответом?

[tripcollor]

Алексей Уколов, так почему тогда с google fonts это проходит? на самом деле я пробовал по разному и как вы говорите тоже, но с гуглом это работает и я делал ориентируясь на него

[tripcollor]

Алексей Уколов, вот ссылка для ознакомления https://habrahabr.ru/company/pechkin/blog/259909/

[Алексей Уколов]

Ок, допустим font-face подтянутся с внешнего сервера. Но этот сервер должен работать по HTTPS, если почтовый клиент работает через HTTPS (сейчас сложно найти тот, который не шифрует соединение) и на сервере должны быть корректно настроены заголовки.
Переведите сервер на HTTPS (или выложите файлы стилей и шрифтов на домен, где HTTPS уже настроен) и попробуйте воспроизвести свою вёрстку здесь: https://codepen.io/pen. Если в консоли будут ошибки cross-origin, нужно будет настроить и их.

[Алексей Уколов]

Failed to load kangoroom.ru/MuseoSansCyr/stylesheet.css: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'www.test-cors.org' is therefore not allowed access.

Да, вам нужно и CORS на сервере настроить в дополнение к HTTPS.

Answer 2

[Андрей Фатюк]

А по какому адресу страничка хостится? Почему бы не хранить шрифт и css к нему там же?

Comments

[tripcollor]

Андрей Фатюк: потому что это не страничка а email письмо