Как подключить скачанный шрифт в css
Перейти к содержимому

Как подключить скачанный шрифт в css

  • автор:

Не могу подключить свой шрифт через @font-face

Всем привет не могу подключить свой шрифт, проверяю в двух браузерах и не в одном не работает. Закинул Шрифт в корневую папку. Ниже приведен код:

 @font-face < font-family: MyCustomFont; src: url(OpenSans-Light.ttf) /* TTF file for CSS3 browsers */ >body,html < margin-top:0px; margin-left:0px; margin-right::0px; margin-bottom:0px; width: 100%; height: 100%; vertical-align:top; vertical-align:top; font-size:12px; font-family:"MyCustomFont"; color:#ffffff; background-image:url(../img/bg.jpg); background-repeat:repeat-y; background-color:#c5c5c5; background-position:50% 0; >

В чем может быть проблема? Заранее спасибо!
Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
задан 12 янв 2014 в 13:47
duddeniska duddeniska
3,968 17 17 золотых знаков 67 67 серебряных знаков 113 113 бронзовых знаков
12 янв 2014 в 14:18
заработало,как описано здесь ru.stackoverflow.com/a/645639/228324 спасибо
10 июн 2017 в 14:15
Поробуйте подключить cyrillic вариант, для русского языка
13 июн 2019 в 7:26

8 ответов 8

Сортировка: Сброс на вариант по умолчанию

Попробуйте воспользоваться онлайн-генераторами шрифтов, чтобы сгенерировать шрифты разных форматов под разные браузеры:

1) http://www.fontsquirrel.com/tools/webfont-generator 2) http://www.web-font-generator.com/ 

Загрузите свой шрифт, в ответ вам будет дан на скачивание архив с различными форматами и CSS-файл с необходимым кодом. Скопируйте скаченные щрифты к себе на сайт и вставьте CSS. Попробуйте оба генератора, не знаю почему, но работают они, видимо, по-разному. В случае использования первого сервиса, выберете «EXPERT. » и добавьте SVG формат, если не ошибаюсь, он нужен для Firefox. Не забудьте проверить корректность путей до шрифтов.

Как подключить скачанные шрифты?

Не получается подключать шрифт, миллион способов попрообвал, все делаю вроде правильно, он отображается в браузере, не перечеркнутый, он он не работает.
Скачивал с google fonts, google fonts helper, и еще в не скольких, ничего не выходит
Вот код css

/* m-plus-1p-regular - latin */ @font-face < font-family: 'M PLUS 1p'; font-style: normal; font-weight: 400; src: local('M PLUS 1p'), local('MPLUS1p-Regular'), url('../fonts/m-plus-1p-v19-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/m-plus-1p-v19-latin-regular.woff') format('woff') /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ >body

Пробовал много файлов подключать, все равно ничего не получается, вроде шрифты легко подключить, но голова уже кипит, не понимаю почему не работает, помогите пожалуйста!

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

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

Средний 4 комментария

dimovich85

Dima Polos @dimovich85 Куратор тега CSS

Чего решили, что не подулючился? Проверьте пути, посмотрите Network в DevTools, скачались они или нет. При подключении шрифтов, не забывайте фолбек указать. Посмотрите computed, в самом низу. Еще посмотрите, какой набор символов в шрифте, и какой на странице (вдруг в шрифте нет кириллицы?).

sickgang @sickgang Автор вопроса

Dima Polos, наконец то, и правда, в шрифте нет кириллицы
Хотя в макете он указывается, можно ли его найти с кириллицой?

Подключение шрифта к html странице

Уже стало обычным то, что шрифты на сайте используются сторонние, т.к. стандартный набор шрифтов установленных в вашу операционную систему не подходит по каким-либо причинам (как правило – не устраивает вид и начертание). Поэтому возникает необходимость в использовании разнообразных шрифтов, разработанных другими компаниями.

Как же подключить шрифт к странице? Существует несколько способов:

1. Использование сервиса Google Fonts – https://fonts.google.com , где достаточно “наплюсовать” необходимые шрифты и затем с помощью вспомогательного окна в правой нижней части экрана провести дополнительную кастомизацию (выбрать жирность, курсив), и затем на вкладке Embed скопировать ссылку для вставки в тег head.

2. Подключение шрифта, размещая его на своем сайте:

На сегодняшний день для подключения шрифта достаточно иметь всего два файла в формате woff и woff2. Файлы в этих форматах занимают мало места, соответственно быстрее подгружаются к страничке, они поддерживаются всеми современными браузерами https://caniuse.com/#search=woff , https://caniuse.com/#search=woff2 (кроме Opera Mini) и включать файлы в форматах ttf, eot или svg – пережиток прошлого.
Таким образом, код для вставки в css файл выглядит так:

@font-face < font-family: 'Roboto'; src: local('Roboto'), url('../fonts/Roboto.woff2') format('woff2'), url('../fonts/Roboto.woff') format('woff'); font-weight: normal; font-style: normal; >

При необходимости подключить одно название шрифта и при этом указывать разную жирность или курсив, следует использовать такую конструкцию CSS:

@font-face < font-family: 'museo_sans_cyrl'; src: url('../fonts/museosanscyrl-100.woff2') format('woff2'), url('../fonts/museosanscyrl-100.woff') format('woff'); font-weight: 100; font-style: normal; >@font-face < font-family: 'museo_sans_cyrl'; src: url('../fonts/museosanscyrl-300.woff2') format('woff2'), url('../fonts/museosanscyrl-300.woff') format('woff'); font-weight: 300; font-style: normal; >@font-face < font-family: 'museo_sans_cyrl'; src: url('../fonts/museosanscyrl-500.woff2') format('woff2'), url('../fonts/museosanscyrl-500.woff') format('woff'); font-weight: 500; font-style: normal; >

И затем в коде достаточно указывать необходимую жирность только с помощью font-weight.

Код устаревших конструкций можно уже не применять. Код приводится для ознакомления:

@font-face < font-family: 'Roboto'; src: local('Roboto'), url('../fonts/Roboto.eot'), url('../fonts/Roboto.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto.woff') format('woff'), url('../fonts/Roboto.ttf') format('truetype'), url('../fonts/Roboto.svg#Roboto') format('svg'); font-style: normal; font-weight: normal; >

Сервисы для конвертации шрифтов ttf, otf в woff и woff2:

  • https://www.fontsquirrel.com/
  • https://everythingfonts.com/font-face

Шрифты можно найти на сайтах:

  • http://fonts4web.ru/
  • http://ifont.ru/
  • https://google-webfonts-helper.herokuapp.com/fonts

Подключаем веб-шрифты

bg

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

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

Рассмотрим два способа подключить веб-шрифты

  1. Подключить веб-шрифт со стороннего сервиса, например Google Fonts через
  2. Подключить файлы шрифтов через @font-face

Подключение веб-шрифтов с Google Fonts

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

Заходим на официальный сайт Google Fonts и выбираем шрифт

1

Далее выбираем начертания веб-шрифта, например Regular (стандартной толщины) и Light (чуть более узкий, чем стандартный) — нажимаем на + Select this style. (Если нужно снять выбор — нажимаем на — Remove this style)

2

В правом верхнем углу нажимаем на иконку выбранных шрифтов

3

В открывшемся окне выбираем способ подключения и копируем код расположенный ниже

4

Вставляем скопированный код в

     Glow      

Чуть ниже копируем CSS свойство для использования подключеного шрифта

5

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

/* Задаем подключенный шрифт для body (по-умолчанию - Regular (400)) */ body < font-family: 'Roboto', sans-serif; >/* Для .text добалявляем более узкое начертание шрифта - Light (300)*/ .text

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

Минусом этого способа является зависимость от сервиса Google Fonts. Если сервис перестанет работать, то подключенные шрифты не загрузятся

Данный способ полезен при создании быстрых прототипов верстки, для своих проектов/экспериментов

Подключение через @font-face

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

Google Fonts также позволяет скачивать бесплатные шрифты, чтобы хранить на хостинге вместе с проектом и подключать их через @font-face

На странице выбранного шрифта, сверху справа нажимаем на кнопку Download family

6

Разархивируем скачанный zip-файл и видим файлы выбранного шрифта всех возможных его начертаний в формате *.ttf

У веб-шрифта должен быть определенный формат, который будет поддерживаться браузерами. На данный момент самый оптимальный формат веб-шрифтов — *.woff (Поддержка формата WOFF)

Чтобы конвертировать файлы формата *.ttf в формат *.woff воспользуемся бесплатным онлайн сервисом Transfonter

Переходим на официальный сайт сервиса Transfonter и нажимаем кнопку Add fonts

7

В открывшемся окне ищем папку в которую был разархивирован скачанный zip-файл, и выбираем необходимые начертания шрифта

Выбранные начертания шрифта будут загружены в сервис для конвертирования

8

Ниже расположены настройки конвертирования. Справа в списке форматов шрифтов выбираем только формат WOFF. Все остальные настройки оставляем по-умолчанию

9

Далее нажимаем кнопку Convert

10

После того, как шрифты будут сконвертированы, ниже слева появится ссылка Download для скачивания

11

Скачанный zip-файл содержит сгенерированные стили CSS для подключения шрифтов и *.woff файлы шрифтов

12

Файлы шрифтов копируем в папку fonts нашего проекта. Названия файлов шрифтов не изменяем.

13

Файл stylesheet.css содержит следующие сгенерированные стили

@font-face < font-family: 'Roboto'; src: url('Roboto-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; >@font-face

Копируем все содержимое файла stylesheet.css в самое начало нашего основного файла стилей CSS.

Так как основной файл стилей находится в папке css, отличной от папки, где лежат файлы шрифтов, необходимо внести некоторые изменения — в url добавляем относительный путь до папки fonts (остальные свойства не меняем)

@font-face < font-family: 'Roboto'; src: url('../fonts/Roboto-Light.woff') format('woff'); /* изменен url до файлов шрифтов */ font-weight: 300; font-style: normal; font-display: swap; >@font-face < font-family: 'Roboto'; src: url('../fonts/Roboto-Regular.woff') format('woff'); /* изменен url до файлов шрифтов */ font-weight: normal; font-style: normal; font-display: swap; >

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

/* Задаем подключенный шрифт для body (по-умолчанию - Regular (400)) */ body < font-family: 'Roboto', sans-serif; >/* Для .text добалявляем более узкое начертание шрифта - Light (300)*/ .text

Преимущество данного способа в том, что веб-шрифты храняться на хостинге вместе с проектом, и не зависят от сторонних сервисов

Полезные ссылки

Большой выбор бесплатных шрифтов — Google Fonts

Онлайн конвертор веб-шрифтов — Transfonter

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *