Как кроссбраузерно подключить нестандартный шрифт на сайт при помощи CSS?

Question

[Лариса]

Заказчик хочет шрифт Franklin Gothic Demi Cond

@font-face {
    font-family: "Franklin Gothic Demi Cond";
    src: url("/project/fonts/Franklin.eot");
}
@font-face {
    font-family: "Franklin Gothic Demi Cond";
    src: url("/project/fonts/Franklin.ttf");
}

Этот вариант будет кроссбраузерным или требуется еще что-то прописать?
а как это отработает для андроида?

может где-то есть об этом хорошая статья?

Всем заранее спасибо)
Удачного дня и адекватных заказчиков!

Comments

[Лариса]

Очень много ответов не по теме вопроса...

Интересует на сегодняшний момент, так как удалось только старую статью отыскать,
что-то типа вот такой информации - запись кода в CSS, как в тексте вопроса

@font-face {
   font-family: "Franklin Gothic Demi Cond";   

   src: url('/project/fonts/Franklin.eot'); /* IE9 */

   src: url('/project/fonts/Franklin.eot?') format('eot'),  /* IE6-IE8 */

   url('/project/fonts/Franklin.woff') format('woff'), /* Современные браузеры */

   url('/project/fonts/Franklin.ttf')  format('truetype'), /* Safari, Android, iOS */  

   url('/project/fonts/Franklin.svg#svgGraublauweb') format('svg'); /* iOS */  
}

[Дмитрий]

Зачем вы отвечаете и потом удаляете комментарии? Что у вас в голове вообще?

Answer 1

[Rheinmetall]

Можешь воспользоваться https://www.fontsquirrel.com/ или https://fontie.pixelsvsbytes.com/webfont-generator

Comments

[Rheinmetall]

Лариса: Ответ вполне по теме. Берешь свой шрифт закидываешь в любой генератор (в те что я указал или любой другой) он генерирует все необходимые форматы шрифта, а так же css файл в котором прописано подключение, остается только распаковать сгенерированные шрифты в свой проект и скопировать подключение в свой css файл.

Answer 2

[Максим]

Я не настаиваю на правоте но :

@font-face{
    font-family: OpenSansBold;
    src: url("../fonts/OpenSans/OpenSansBold/OpenSansBold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/OpenSans/OpenSansBold/OpenSansBold.woff") format("woff"),
    url("../fonts/OpenSans/OpenSansBold/OpenSansBold.ttf") format("truetype");
}
 
body{
    font-family: OpenSansBold;
}

Answer 3

[Денис Инешин]

Самый простой вариант - https://www.fontsquirrel.com/tools/webfont-generator

• Очень мощный крутой генератор шритфов для сайта с кучей настроек. Например можно выбрать таблицу только с нужными символами (если вам скажем нужны только цифры и шрифта, что очень экономит вес). + генерирует так называемый пуленепробиваемый код, работающий максимально кроссбраузерно.
  
• Главный недостаток FontSquirrel - очень многие шрифты там забанены, так как считает что вы загружаете пиратский шрифт.
  
  

Другой вариант, берем Bulletproof @font-face Syntax и конвертируем шрифты сами. Сегодня вообще можно обойтись лишь WOFF шрифтом: caniuse.com/#search=woff

Comments

[Денис Инешин]

Лариса: как скажете, но во втором абзаце я привел ссылку на статью: https://www.paulirish.com/2009/bulletproof-font-fa... - это оно и есть. Пуленепробиваемое подключение.

[Лариса]

Денис Инешин: статья SEP 4TH, 2009, как бы 8 лет назад написана

[Rheinmetall]

Главный недостаток FontSquirrel - очень многие шрифты там забанены, так как считает что вы загружаете пиратский шрифт.

Я поэтому и пользуюсь fontie, ему вообще пофиг что ты ему скармливаешь

[Денис Инешин]

Лариса: и что, думаете что-то изменилось? Если вы поддерживаете IE8+ то все тоже самое.