Сервис шрифты Google Fonts предоставляет дизайнерам и разработчикам доступ к множеству бесплатных шрифтов онлайн. С помощью этого сервиса можно подключить нестандартные шрифты для сайта. Большая часть предлагаемых шрифтов для латиницы, но есть и кириллические (Cyrillic) Google fonts.


Как подключить шрифт css

В статье "Добавление шрифтов Google fonts" описано как работать с сервисом Google Fonts и как подключить шрифт Google font в Joomla и без нее (подключение шрифтов html).


Пример подключение стандартного шрифта Calibri web font

.selector {font:normal normal 14px Calibri,sans-serif;}

Пример подключения нестандартного шрифта Open Sans с Google fonts

.selector {font:normal normal 14px 'Open Sans',Arial,sans-serif;}
* параметры подключаемого шрифта:

normal - стиль шрифта css (может быть normal - обычный, italic - курсивный или наклонный шрифт)

normal - толщина шрифта (может быть bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900)

14px - размер шрифта (высота)

'Open Sans' - семейство шрифта

Arial - альтернативное семейство шрифта

sans-serif - тип шрифта (в данном случае шрифт без засечек)


Цвет шрифту можно задать следующим образом:

.selector {color:#000;}

#000 - черный цвет в формате HEX


Тень шрифту можно задать следующим образом:

.selector {text-shadow:1px 1px 1px #000;}

1px - смещение тени по оси X

1px - смещение тени по оси Y

1px - длинна тени

#000 - цвет тени


Сделать шрифт заглавными можно следующим образом:

.selector {text-transform:uppercase;}

uppercase - прописными (верхний регистр)

lowercase - строчными (нижний регистр)

capitalize - первый символ каждого слова в предложении будет заглавным, а остальные символы не меняют размера


Кроссбраузерное подключения нестандартных шрифтов

Для кроссбраузерного подключения нестандартных шрифтов, имея сам файл шрифта в формате ttf, необходимо пропустить через web font converter. Сервисы подобные этому конвертируют шрифт в форматы .ttf, .otf, .eot, .woff, .svg и предоставляют код для вставки в файл стилей css.

Популярные онлайн конвертеры шрифтов


Пример кроссбраузерного подключения шрифта Intro

@font-face {
	font-family:'Intro Regular';
	src:url('intro-regular.eot');
	src:url('intro-regular.eot#iefix') format('embedded-opentype'),
		url('intro-regular.woff') format('woff'),
		url('intro-regular.ttf') format('truetype'),
		url('intro-regular.svg') format('svg');
	font-weight:normal;
	font-style:normal;
} 

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


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

Рейтинг:  4 / 5