Главная / Уроки Wordpress / Как добавить шрифт на сайт

Как добавить шрифт на сайт

В этом уроке расскажу как добавить шрифт на сайт.

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

Для удобства работы скопируйте нужный шрифт из папки C:\Windows\Fonts в любую другую, что бы можно было быстро найти его. Шрифт для работы нужен в формате TTF (прим. my-fonts.ttf).

Теперь необходимо конвертировать его в форматы понятные браузерам: .eot, .svg, .woff.

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

как добавить шрифт на сайт

  1. Загружаем шрифт в формате ttf
  2. Выбираем режим EXPERT
  3. Отмечаем какие форматы нужно получить (сделайте все как на скришоте выше)
  4. Выбираем режим Custom Subdetting для выбора языка шрифта
  5. Отмечаем какое написание шрифта необходимо (на скриншоте выбрано написание русское и английское, латинское и кириллическое, если угодно)
  6. Ставим галочку что мы согласны и все такое 🙂
  7. Загружаем готовые шрифты

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

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

После всех манипуляций начнется загрузка и вы получите архив со шрифтом (такого вида 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 шрифта на сайт. По аналогии можно добавлять столько шрифтов на сайт, сколько считаете необходимым.

Спасибо, все свободны 🙂

В тему!

не работают файлы перевода WordPress

Если не работают файлы перевода WordPress

Сидел писал новый обзор плагина и в очередной раз столкнулся с проблемой: не работают файлы перевода ...

15 комментариев

  1. Здравствуйте!
    Я конвертировала шрифты, но в полученной папке нет файла stylesheet.css, так же отсутствуют шрифты .svg, .ttf
    Что в этом случае делать?
    А еще подскажите, куда копировать шрифты? В медиафайлы? или никуда не копировать? просто прописать их.

    • Андрей

      Значит сделали не по инструкции. Проверьте внимательней. Возможно не загрузили шрифт на обработку.

      «Для внедрения шрифта на сайт необходимо скопировать файлы (fonts.eot, fonts.svg, fonts.woff, fonts.ttf) в то место где находится файл стилей темы style.css (может называться иначе, но это не важно), что бы они были в одной папке на сервере.»

  2. Отлично вышло) Спасибо большое

  3. Добавить шрифт получилось, спасибо! Но я смогла изменить только шрифт основного текста. Скажите, а как можно изменить шрифт меню и заголовков7

    • Андрей

      Очень хорошо. Так же в стиле темы, где описывается меню, заголовки (h1, h2… h6) добавьте строку для назначения шрифта -> font-family: «ваш шрифт»;

  4. Подскажите, если добавлять шрифты вашим способом, при обновлении темы изменения сохранятся?

  5. И НИФИГА!!! В таблицу стилей кинул, а шрифта не видно(((

    • Андрей

      проверьте внимательно правильно ли указано имя шрифта и его расположение на сайте.
      🙂 внимательней и все получится 🙂

  6. Портал просто отличный, все бы такие! Побольше бы таких тем!

  7. Получилось! Фигурную скобку не закрыл

  8. Дмитрий

    Добрый вечер!
    А куда сохраняется архив с fontsquirrel.com?

  9. Спасибо! Давно пользуюсь Вашей статьей)
    Но получается последнее время ещё проще.

    — Загружаю на https://www.fontsquirrel.com/tools/webfont-generator файл шрифта в ttf
    — (кстати вот хорошие сервисы по конвертации из otf в ttf https://everythingfonts.com/otf-to-ttf и https://cloudconvert.com/otf-to-ttf),
    — Оставляю по умолчанию — «Optimal» и скачиваю.
    — Потом на сайт в папку http://you.site/content/themes/youtheme/fonts загружаю файлы шрифта в otf, ttf, woff и woff2

    Потом в конце файла style.css пишу

    @font-face {
    font-family: namefonts;
    src: url(http://you.site/content/themes/youtheme/fonts/namefonts.ttf);
    font-weight: normal;
    }

    И всё работает.

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

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

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.