WordPress. Как добавить пользовательский шрифт

Из этого туториала вы узнаете, как добавить пользовательский шрифт в WordPress.

WordPress. Как добавить пользовательский шрифт

Если вы хотите добавить пользовательский шрифт на ваш сайт WordPress сначала надо найти и загрузить этот шрифт на компьютер. Например, с этого сайта: http://www.fontsquirrel.com.

1. Посетите сайт http://www.fontsquirrel.com., и в «Фильтре шрифтов» (‘Font Filter’), выберите ‘Веб-шрифт’ (Webfont):

   

2. Выберите понравившийся вам шрифт и скачайте его на компьютер:

   

3. Соединитесь с сервером с помощью FTP или Менеджера файлов, перейдите к каталогу ‘wp-content/themes/themeXXXX‘ и создайте там новую папку под названием ‘fonts’. Загрузите скачанный шрифт в эту папку, а затем распакуйте файл(ы). Оригинальный .zip файл после этого можно удалить:

   

4. Войдите в панель управления WordPress. Перейдите в раздел Внешний вид (Appearance) -> Редактор (Editor) и откройте файл ‘style.css‘ из темы themeXXXX:

   

5. Добавьте такой код в конец этого файла ‘style.css‘:

     @font-face { 
     font-family: fontname; 
     src: url('link'); 
   }

   *здесь: название шрифта (fontname) = название, которое вы дадите своему новому шрифту (любое название).

   ссылка (link) = прямая ссылка на файлы шрифтов, которые вы загрузили на сервер. (ссылка на сайт + путь к каталогу + название файла шрифтов):

   

6. Скопируйте код в последнюю строку файла ‘style.css‘ и удалите вторую строку кода с ‘src‘, а затем добавьте метку !important после названия шрифта:

   

7. Вы можете найти класс CSS для конкретного текста с помощью инструмента разработчика:

   

8. Замените @font-face классом CSS (селектором CSS), найденным с помощью инструмента разработчика. Затем нажмите ‘Загрузить файл’ (‘Upload File’):

   

9. Обновите сайт, чтобы увидеть новый пользовательский шрифт.

Вы также можете воспользоваться детальной видео-инструкцией:

WordPress. Как добавить пользовательский шрифт