@font-face в кодировке Base64 для Tumblr

Поскольку Tumblr не принимает файлы веб-шрифтов, размещенные на других доменах, я пытаюсь импортировать файлы напрямую с кодировкой Base64.

Это формат, который я использовал:

@font-face {
  font-family: 'FontName';
  src: url(data:application/vnd.ms-fontobject;base64,[BASE64 CODE]);
  src: url(data:font/woff2;base64,[BASE64 CODE]) format('woff2'),
       url(data:application/font-woff;base64,[BASE64 CODE]) format('woff'),
       url(data:application/x-font-truetype;base64,[BASE64 CODE]) format('truetype');
}

Я безуспешно пытался вставить это с соответствующим кодом в редактор CSS Tumblr, редактор HTML в тег стиля и во внешнюю таблицу стилей. Что я делаю не так?


person Baard Kolstad    schedule 23.02.2017    source источник
comment
Отфильтровывается ли Tumblr (при сохранении/отправке)? Или он присутствует на реальной странице, но просто не работает? [У вас есть пример страницы?]   -  person Philip    schedule 24.02.2017
comment
@Philip Филипп Не похоже, что он отфильтровывается. В последней версии он загружается через внешнюю таблицу стилей, размещенную на static.tumblr.com, что является моим предпочтительным методом, поскольку Base64 загромождает код. Вот сайт, на который я пытаюсь импортировать веб-шрифт: khrelated.tumblr.com.   -  person Baard Kolstad    schedule 24.02.2017
comment
При проверке страницы с помощью Chrome я вижу несколько ошибок, подобных этой: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://khrelated.tumblr.com' is therefore not allowed access. Кажется, что даже сам файл не загружается из-за этого отсутствующего заголовка политики.   -  person Philip    schedule 28.02.2017


Ответы (1)


Похоже, кодировщик Base64, который я использовал, выдавал код, который не работал. Для тех, кто сталкивается с той же проблемой, попробуйте использовать этот кодировщик: https://www.giftofspeed.com/base64-encoder/

person Baard Kolstad    schedule 25.02.2017