Шрифт для сайта

04.04.2013 | Автор Алексей

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

Как говорится «Встречают по одежке…»

Хорошим шагом в этом направлении может служить замена шрифта в элементах оформления сайта.

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

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

Добавляем новый шрифт в три шага

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

Ph4.ru/fonts_fonts.ph4?ja=

бесплатные шрифты для сайта

 

Fontov.net

бесплатные шрифты для сайта 

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

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

Font2Web.com

Сервис для работы со шрифтами 

Загружаете .ttf файл на этот сервис, и на выходе получаете шрифт, готовый для использования на сайте.

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

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

http://ваш_супер_сайт.ru/wp-content/themes/ваша_тема/fonts/

 

Второй шаг
Теперь Вам понадобится мало-мальский уровень знаний HTML, а может и не понадобится. Мы добавим несколько строк в файлы темы.

В файл Style.css, в самое начало, пропишем настройки нового шрифта и ссылки на шрифтовый файл:

@font-face {
	font-family: 'EkaterinaGreat';  //имя шрифта
	src: url('fonts/EkaterinaGreat/EkaterinaGreat.eot');
	src: local('☺'), url('fonts/EkaterinaGreat/EkaterinaGreat.woff') format('woff'), url('fonts/EkaterinaGreat/EkaterinaGreat.ttf') format('truetype'), url('fonts/EkaterinaGreat/EkaterinaGreat.svg') format('svg');
	font-weight: normal;  //обычное написание
	font-style: normal;   //стиль по умолчанию

Теперь шрифт «EkaterinaGreat» можно применять как в оформлении элементов сайта, так и для статей.

 

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

<span style="font-family: EkaterinaGreat, helvetica, sans-serif;"> 
Мало схватывать на лету, нужно еще уметь все это быстро спрятать. 
</span>

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

Образец шрифта Anastasia

Маленькое неудобство в том, что новый шрифт пока не доступен редактору WordPress, то есть текст в редакторе будет отображаться одним из системных шрифтов. В данном случае указанным вторым или третьим в списке — helvetica или San-serif. Исправить это можно установив шрифт в сам WordPress. Но об этом, в одной из будущих статей.

 

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

Для проверки можете воспользоваться сервисом WebPageTest.org, он выдает подробнейший анализ времени загрузки страницы, а также список советов по ее оптимизации.

На этом все. Удачного дня.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>