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

Question

Лариса @loratokareva

html верстальщик

CSS

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

Заказчик хочет шрифт 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");
}

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

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

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

Вопрос задан более трёх лет назад
804 просмотра

2 комментария

Подписаться 2 Оценить 2 комментария

Лариса @loratokareva Автор вопроса

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

Интересует на сегодняшний момент, так как удалось только старую статью отыскать,
что-то типа вот такой информации - запись кода в 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 */  
}

Написано более трёх лет назад

Дмитрий @thewind

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

Написано более трёх лет назад

Решения вопроса 1

1 комментарий

Пригласить эксперта

Ответы на вопрос 2

Комментировать

4 комментария

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+1 ещё

Средний
Как реализовать анимацию текста при выходе за границу блока?
- 2 подписчика
- вчера
- 108 просмотров
1

ответ
CSS

Простой
Как зафиксировать блок с позиционированием от родительского контейнера?
- 2 подписчика
- вчера
- 116 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как определить величину перекоса transform skew?
- 1 подписчик
- 15 апр.
- 64 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как исправить прыгающий контент у сайта?
- 2 подписчика
- 15 апр.
- 214 просмотров
1

ответ
HTML

+1 ещё

Средний
Как сделать чтобы было по 2 блока на строке, а не сразу все 4?
- 2 подписчика
- 15 апр.
- 72 просмотра
1

ответ
CSS

+1 ещё

Простой
Как сделать анимированное закрытие модального окна bootstrap?
- 1 подписчик
- 14 апр.
- 64 просмотра
0

ответов
JavaScript

+4 ещё

Средний
Как сделать эффект закруглений как на фото?
- 4 подписчика
- 14 апр.
- 2581 просмотр
2

ответа
CSS

+1 ещё

Простой
Почему 400 шрифт выглядит жирнее, чем должен быть?
- 1 подписчик
- 13 апр.
- 103 просмотра
1

ответ
HTML

+1 ещё

Простой
Как сделать border opacity при background-color?
- 1 подписчик
- 13 апр.
- 64 просмотра
1

ответ
HTML

+1 ещё

Простой
Почему при изменении transform scale моргает цвет другого текста, который к нему даже не относится?
- 1 подписчик
- 13 апр.
- 43 просмотра
0

ответов
Показать ещё Загружается…

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Графический дизайнер

18 апр. 2024, в 07:58

500 руб./в час

Разработать мини-приложение Windows 7-11, Linux,Macos

18 апр. 2024, в 07:22

45000 руб./за проект

Каталог AI tools

18 апр. 2024, в 01:12

150000 руб./за проект

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

Интересует на сегодняшний момент, так как удалось только старую статью отыскать,
что-то типа вот такой информации - запись кода в 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 · 2017-05-11 12:20:10

Rheinmetall @Rheinmetall

Могу сморозить глупость

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

Ответ написан более трёх лет назад

1 комментарий

Answer 2 · 2017-05-11 11:52:30

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

@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 · 2017-05-11 12:52:53

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

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

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

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт