fonts-pic
Мега полезная таблица семейств стандартных шрифтов:

Значение @font-family Windows Mac Семейство
Arial, Helvetica, sans-serif Arial Arial, Helvetica sans-serif
«Arial Black», Gadget, sans-serif Arial Black Arial Black, Gadget sans-serif
«Comic Sans MS», cursive Comic Sans MS Comic Sans MS5 cursive
«Courier New», Courier, monospace Courier New Courier New, Courier6 monospace
Georgia, serif Georgia1 Georgia serif
Impact,Charcoal, sans-serif Impact Impact5, Charcoal6 sans-serif
«Lucida Console», Monaco, monospace Lucida Console Monaco5 monospace
«Lucida Sans Unicode», «Lucida Grande», sans-serif Lucida Sans Unicode Lucida Grande sans-serif
«Palatino Linotype», «Book Antiqua», Palatino, serif Palatino Linotype, Book Antiqua3 Palatino6 serif
Tahoma, Geneva, sans-serif Tahoma Geneva sans-serif
«Times New Roman», Times, serif Times New Roman Times serif
«Trebuchet MS», Helvetica, sans-serif Trebuchet MS1 Helvetica sans-serif
Verdana, Geneva, sans-serif Verdana Verdana, Geneva sans-serif
Symbol Symbol2 Symbol2
Webdings Webdings2 Webdings2
Wingdings, «Zapf Dingbats» Wingdings2 Zapf Dingbats2
«MS Sans Serif», Geneva, sans-serif MS Sans Serif4 Geneva sans-serif
«MS Serif», «New York», serif MS Serif4 New York6 serif

Стандартные шрифты — полезная вещь :) Если надоели шрифты с загагулинами и хочется чего совсем простого и сердитого — то переписывайте font-family. В теме WordPress в файле стилей style.css в строке font-family: меняем значение.

Например:

1
font-family: Verdana, "Geneva CY", "DejaVu Sans", sans-serif;

Как в примере, так и с таблички вряд забираем все названия.

Далее ниже по файлу style.css тоже надо пробежаться и позаменять значения, возможно под другие блоки шрифт другой.

Рассмотрим другой случай — сочетание стандартных и не очень стандартных шрифтов одновременно на сайте. Например, для выделения визуально каких-то блоков (меню, кнопок и тд).

Форматы веб-шрифтов. Как оказывается, формат не один, и мало того, для каждого браузера и операционки он свой. Самые популярные форматы TTF и OTF. Такой формат отображается во всех браузерах, кроме IE. Для него нужен именно EOT. И формат WOFF, поддерживающий дополнительные мета данные. WOFF — сейчас набирает обороты, но не отображается в старых браузерах. С форматом определились, загружаем все. Чуть не забыли за SVG — для ОС Safari и Android. Не отпало желание устанавливать шрифты?! :)

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

Один из полезных ресурсов, где собраны бесплатные шрифты — Google Web Font.

google-font-01

Слева по фильтру выбираем необходимые характеристики. Все очень удобно и понятно. Из отфильтрованных шрифтов выбираем понравившейся. Нажимаем кнопку «Quick use». Появится окно выбора стиля шрифта для загрузки (жирный, курсив и тд). Для меньшего веса загружаемого шрифта не выбирайте показатели, которые 100% не будете использовать.

google-font-02

После генерации появится код импорта, который необходимо вставить в самом начале файла style.css

1
@import url(https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700,700italic&subset=cyrillic,cyrillic-ext);

Подключение фирменного шрифта. Если имеется фирменный разработанный шрифт или такой, которого нет в Google Font, то используем директиву @font-face. В файле style.css находим строчку с @font-face или создаем ее и вставляем код:

1
2
3
4
@font-face {
font-family: Font;
src: url('Font.ttf')
}

А теперь вспомним о разных форматах шрифтов и подкорректируем код:

1
2
3
4
5
6
7
8
9
10
11
@font-face {
   font-family: Font;   
 
   src: url('Font.eot'); /* IE9 */
   src: url('Font.eot?') format('eot'),  /* IE6-IE8 */
 
   url('Font.woff') format('woff'), /* Современные браузеры */
   url('Font.ttf')  format('truetype'), /* Safari, Android, iOS */  
 
   url('Font.svg') format('svg'); /* iOS */  
}
http://www.seovasikaru.com/wp-content/uploads/2015/11/fonts-pic-1024x812.jpghttp://www.seovasikaru.com/wp-content/uploads/2015/11/fonts-pic-150x150.jpgvasikaruWordPressВеб-дизайнfont,wordpress,веб-дизайн,шрифтМега полезная таблица семейств стандартных шрифтов: Значение @font-family Windows Mac Семейство Arial, Helvetica, sans-serif Arial Arial, Helvetica sans-serif 'Arial Black', Gadget, sans-serif Arial Black Arial Black, Gadget sans-serif 'Comic Sans MS', cursive Comic Sans MS Comic Sans MS5 cursive 'Courier New', Courier, monospace Courier New Courier New, Courier6 monospace Georgia, serif Georgia1 Georgia serif Impact,Charcoal, sans-serif Impact Impact5, Charcoal6 sans-serif 'Lucida Console', Monaco, monospace Lucida Console Monaco5 monospace 'Lucida Sans Unicode', 'Lucida Grande', sans-serif Lucida Sans Unicode Lucida Grande sans-serif 'Palatino Linotype', 'Book Antiqua', Palatino, serif Palatino...Создание сайтов, продвижение сайтов, seo, юзабилити