Недавно столкнулся с проблемкой. Нужно было внизу карточки с товаром подгружать штрих-код этого товара. Ну вроде все просто, скачал ttf шрифт, подключил в css - все вроде работает, но осадочек не тот.
Сам файлик шрифта маленький и отдельным файлом его таскать за сайтом не хотелось. Наткнулся на интересный забугорный сайтик
http://www.fontsquirrel.com/tools/webfont-generator загружаешь на него свой шрифт, выбираешь режим эксперт и ставишь точку CSS >> Base64 Encode потом скачиваешь zip архивчик в котором лежит ваш CSS с встроенным кодом шрифта. например мой CSS выглядел вот так
@font-face {
font-family: 'code_128regular';
src: url(data:application/font-woff2;charset=utf-8;base64,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) format('woff2'),
url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
font-weight: normal;
font-style: normal;
}
Вот так штрих-код выглядит на сайте
http://novye-podarki.ru/heeg3.html