В этом уроке расскажу как добавить шрифт на сайт.
Вы можете добавить абсолютно любой шрифт, а так же возможно добавить несколько шрифтов на сайт. Просто так написать название шрифта не достаточно, и он будет отображаться только на тех компьютерах на которых установлен этот шрифт, и нам необходимо подготовить нужный шрифт для добавления на сайт.
Для удобства работы скопируйте нужный шрифт из папки C:\Windows\Fonts в любую другую, что бы можно было быстро найти его. Шрифт для работы нужен в формате TTF (прим. my-fonts.ttf).
Теперь необходимо конвертировать его в форматы понятные браузерам: .eot, .svg, .woff.
В интернете куча конвертеров шрифтов, но скажу честно, получилось корректно сделать только на одном сервисе —
- Загружаем шрифт в формате ttf
- Выбираем режим EXPERT
- Отмечаем какие форматы нужно получить (сделайте все как на скришоте выше)
- Выбираем режим Custom Subdetting для выбора языка шрифта
- Отмечаем какое написание шрифта необходимо (на скриншоте выбрано написание русское и английское, латинское и кириллическое, если угодно)
- Ставим галочку что мы согласны и все такое 🙂
- Загружаем готовые шрифты
Небольшая оговорка, сервис хоть и дает качественный результат, но к сожалению тормозит 🙂 Запаситесь терпением.
После всех манипуляций начнется загрузка и вы получите архив со шрифтом (такого вида webfontkit-20140414-093208.zip), примером его использования и краткой документацией. Можете все выбросить оставив только файлы шрифта (5 штук) которые называются по имени вашего шрифта в форматах .eot, .svg, .woff, .ttf и файл stylesheet.css (его временно).
Для внедрения шрифта на сайт необходимо скопировать файлы (fonts.eot, fonts.svg, fonts.woff, fonts.ttf) в то место где находится файл стилей темы style.css (может называться иначе, но это не важно), что бы они были в одной папке на сервере.
Далее открываем файл стилей который вы скачали со шрифтом stylesheet.css, копируем его содержимое и вставляем в файл стилей вашей темы. В самом верху стилей добавляем конструкцию:
@font-face { font-family: 'fonts'; src: url('fonts.eot'); src: url('fonts.eot?#iefix') format('embedded-opentype'), url('fonts.woff') format('woff'), url('fonts.ttf') format('truetype'), url('fonts.svg#pf_din_text_cond_probold') format('svg'); font-weight: normal; font-style: normal; }
После этого можете присваивать нужному тексту на сайте этот шрифт
font-family: "fonts", sans-serif;
Для того, чтобы добавить несколько шрифтов на сайт, просто повторите тоже самое для каждого шрифта.
Так же подготовьте шрифт для загрузки, разместите файлы шрифта рядом с файлом темы style.css и добавьте в стиль:
@font-face { font-family: 'fonts'; src: url('fonts.eot'); src: url('fonts.eot?#iefix') format('embedded-opentype'), url('fonts.woff') format('woff'), url('fonts.ttf') format('truetype'), url('fonts.svg#pf_din_text_cond_probold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fonts2'; src: url('fonts2.eot'); src: url('fonts2.eot?#iefix') format('embedded-opentype'), url('fonts2.woff') format('woff'), url('fonts2.ttf') format('truetype'), url('fonts2.svg#pf_din_text_cond_probold') format('svg'); font-weight: normal; font-style: normal; }
Теперь добавлено 2 шрифта на сайт. По аналогии можно добавлять столько шрифтов на сайт, сколько считаете необходимым.
Спасибо, все свободны 🙂
Здравствуйте!
Я конвертировала шрифты, но в полученной папке нет файла stylesheet.css, так же отсутствуют шрифты .svg, .ttf
Что в этом случае делать?
А еще подскажите, куда копировать шрифты? В медиафайлы? или никуда не копировать? просто прописать их.
Значит сделали не по инструкции. Проверьте внимательней. Возможно не загрузили шрифт на обработку.
«Для внедрения шрифта на сайт необходимо скопировать файлы (fonts.eot, fonts.svg, fonts.woff, fonts.ttf) в то место где находится файл стилей темы style.css (может называться иначе, но это не важно), что бы они были в одной папке на сервере.»
Отлично вышло) Спасибо большое
Добавить шрифт получилось, спасибо! Но я смогла изменить только шрифт основного текста. Скажите, а как можно изменить шрифт меню и заголовков7
Очень хорошо. Так же в стиле темы, где описывается меню, заголовки (h1, h2… h6) добавьте строку для назначения шрифта -> font-family: «ваш шрифт»;
Подскажите, если добавлять шрифты вашим способом, при обновлении темы изменения сохранятся?
нет не сохранится. изменения в стиле темы надо будет перенести в новую версию
И НИФИГА!!! В таблицу стилей кинул, а шрифта не видно(((
проверьте внимательно правильно ли указано имя шрифта и его расположение на сайте.
🙂 внимательней и все получится 🙂
Портал просто отличный, все бы такие! Побольше бы таких тем!
Получилось! Фигурную скобку не закрыл
Отлично! 🙂
Добрый вечер!
А куда сохраняется архив с fontsquirrel.com?
от вас зависит 🙂 куда сохраняете там и сохраняется 🙂
Спасибо! Давно пользуюсь Вашей статьей)
Но получается последнее время ещё проще.
— Загружаю наhttps://www.fontsquirrel.com/tools/webfont-generator файл шрифта в ttfhttps://everythingfonts.com/otf-to-ttf и https://cloudconvert.com/otf-to-ttf ),http://you.site/content/themes/youtheme/fonts загружаю файлы шрифта в otf, ttf, woff и woff2
— (кстати вот хорошие сервисы по конвертации из otf в ttf
— Оставляю по умолчанию — «Optimal» и скачиваю.
— Потом на сайт в папку
Потом в конце файла style.css пишу
@font-face {http://you.site/content/themes/youtheme/fonts/namefonts.ttf );
font-family: namefonts;
src: url(
font-weight: normal;
}
И всё работает.