Грузим свой шрифт на сайт, используя CSS

Потратил некоторое время на этот вопрос, и чтобы оно не было потрачено зря, излагаю то, что удалось накопать.

Использование произвольных шрифтов, загружаемых вашим сайтом, это реально. Помните, что файлы шрифтов могут быть весьма нескромных размеров, так что увлекаться этим нужно осторожно. Конечно, Интернет будет только расширять свои каналы, и скоро можно будет не делать подобных оговорок.

Загрузить шрифт с сервера, а потом использовать можно примерно как то так (см. кусочек CSS):

Как показано выше в кросс-браузерном примере, предлагают делать на сайте randsco.com. Там очень подробно написано по существу данного вопроса, правда, по-английски.

Форматы шрифтов.

Существует великое множество разных форматов шрифтов и способов их взаимного преобразования. Все эти способы собраны в кучу в виде сервиса на одном сайте. Вы сможете загрузить свой шрифт на этот сайт, и выполнить преобразование в любой из описанных там форматов. Формат .EOT — нам нужен только для IE, который до 9й версии других форматов знать не хотел.

Ну, и дам ещё одну полезную ссылку на описание формата СSS от W3С в той его части, которая относится к шрифтам.

Все тоже самое только быстро, и не заморачиваясь.

Напоследок оставил самую нужную ссылку, чтобы наградить ею самых терпеливых. Сервис @font-face генератор на сайте fontsquirrel.com делает практически все за вас. И преобразование в нужные форматы, и создание кроссбраузерного CSS кода. Вам нужно загрузить ваши truetype шрифты, а генератор выдаст вам архив со всеми нужными форматами шрифтов, css файлом и примером использования всех этих файлов.

Если шрифто-белка не работает, есть аналогичный сервис — www.font2web.com.

Из личного опыта.

1. Не все шрифты содержат кириллические символы. Иногда об этом забывается, тогда кириллица отображается следующим шрифтом из списка font-family или шрифтом выбранным «по-умолчанию».

2. Иногда браузеры (у меня так себя вели Chrome и Opera), загрузив шрифт, устанавливают по умолчанию какое то (видимо максимальное в шрифте) значение свойства line-height, для загруженного шрифта. Так что не поленитесь и проверьте, где и что расползлось в вашей верстке. Придется эти места фиксить установкой line-height.

3. Если не знаете какой бы вариант выбрать в @font-faсе генераторе, выбирайте basic.

Написать комментарий

Мало букафф? Читайте есчо !

Чудесный шрифт (awesome font CDN)

Ноябрь 23, 2016 г.

Идея пиктографических шрифтов эксплуатируется уже давно. Взять хотя бы фреймворк css bootstrap. Соль в том, что мы работаем с векторными рисунками. Они ...

Читать

Грузим шрифт на сайт, используя Google

Октябрь 14, 2015 г.

Вы можете подключать шрифты, расположенные не только на вашем веб сервере. Google предоставляет в свободное пользование большую коллекцию шрифтов для ваших ...

Читать

 

Комментарии к «Грузим свой шрифт на сайт, используя CSS»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: