Выбор наилучших современных шрифтов для вэб

H1. Open Sans

h2.Крупно

H3. Заголовки

H4. Мельче

H5. Отдельные блоки текста
H6. Минимальные тексты

Лёгкий_Light_100 Регуляр_Regular_300 Нормаль_Normal_500 Жирный_Bold_600 Супер_Bold_700 Супер_Bold_800 Супер_Extra-Bold_900 small_НОРМАЛЬНЫЙ_500 small-small_НОРМАЛЬНЫЙ_500 small-small-small_НОРМАЛЬНЫЙ_500 УСЛУГИ СТАТЬИ КОМПАНИЯ ПОРТФОЛИО small-small_ЖИРНЫЙ_900 small-small-small_ЖИРНЫЙ_900

Варианты кода для вставки в <head> и <style>:


<link href="//fonts.googleapis.com/css?family=Open+Sans:100italic,200italic,300italic,400italic,500italic,600italic,700italic,800italic,900italic,100,200,300,400,500,600,700,800,900&subset=latin,cyrillic,cyrillic-ext" rel="stylesheet" type="text/css">

<link href="//fonts.googleapis.com/css?family=Open+Sans%3A100italic%2C200italic%2C300italic%2C400italic%2C500italic%2C600italic%2C700italic%2C800italic%2C900italic%2C100%2C200%2C300%2C400%2C500%2C600%2C700%2C800%2C900&subset=latin%2Clatin-ext%2Ccyrillic%2Ccyrillic-ext&ver=3.8.1" rel="stylesheet" type="text/css" media="all">

@import url(http://fonts.googleapis.com/css?family=Open+Sans:100italic,200italic,300italic,400italic,500italic,600italic,700italic,800italic,900italic,100,200,300,400,500,600,700,800,900);

.OpenSans{font-family:'Open Sans',sans-serif;}
				

H1. Open Sans Condensed

h2.Крупно

H3. Заголовки

УСЛУГИ СТАТЬИ КОМПАНИЯ ПОРТФОЛИО

H5. Отдельные блоки текста
H6. Минимальные тексты

Лёгкий_Light_100 Регуляр_Regular_300 Нормаль_Normal_500 Жирный_Bold_600 Супер_Bold_700 Супер_Bold_800 Супер_Extra-Bold_900 small_НОРМАЛЬНЫЙ_500 small-small_НОРМАЛЬНЫЙ_500 small-small-small_НОРМАЛЬНЫЙ_500 small_ЖИРНЫЙ_900 small-small_ЖИРНЫЙ_900 small-small-small_ЖИРНЫЙ_900

Варианты кода для вставки в <head> и <style>:


<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,cyrillic-ext,cyrillic" rel="stylesheet" type="text/css">

.OpenSansCondensed{font-family:'Open Sans Condensed',sans-serif;}
				

H1. Roboto Condensed

h2.Крупно

УСЛУГИ СТАТЬИ КОМПАНИЯ ПОРТФОЛИО

H4. Мельче

H5. Отдельные блоки текста
H6. Минимальные тексты

Лёгкий_Light_100 Регуляр_Regular_300 Нормаль_Normal_500 Жирный_Bold_600 Супер_Bold_700 Супер_Bold_800 Супер_Extra-Bold_900 small_НОРМАЛЬНЫЙ_500 small-small_НОРМАЛЬНЫЙ_500 small-small-small_НОРМАЛЬНЫЙ_500 small_ЖИРНЫЙ_900 small-small_ЖИРНЫЙ_900 small-small-small_ЖИРНЫЙ_900

Варианты кода для вставки в <head> и <style>:


<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700&subset=latin,cyrillic,cyrillic-ext" rel="stylesheet" type="text/css">

.RobotoCondensed{font-family:'Roboto Condensed',sans-serif;}
				

H1. PT Sans Narrow

h2.Крупно

H3. Заголовки

УСЛУГИ СТАТЬИ КОМПАНИЯ ПОРТФОЛИО

H5. Отдельные блоки текста
H6. Минимальные тексты

Лёгкий_Light_100 Регуляр_Regular_300 Нормаль_Normal_500 Жирный_Bold_600 Супер_Bold_700 Супер_Bold_800 Супер_Extra-Bold_900 small_НОРМАЛЬНЫЙ_500 small-small_НОРМАЛЬНЫЙ_500 small-small-small_НОРМАЛЬНЫЙ_500 small_ЖИРНЫЙ_900 small-small_ЖИРНЫЙ_900 small-small-small_ЖИРНЫЙ_900

Варианты кода для вставки в <head> и <style>:


<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:100italic,200italic,300italic,400italic,500italic,600italic,700italic,800italic,900italic,100,200,300,400,500,600,700,800,900&subset=latin,cyrillic,cyrillic-ext" rel="stylesheet" type="text/css">

@import url("//fonts.googleapis.com/css?family=PT+Sans+Narrow:400normal,700normal&subset=cyrillic&directory&text=%D0%90%D0%B0%D0%91%D0%B1%D0%92%D0%B2%D0%93%D0%B3%D0%94%D0%B4%D0%95%D0%B5%D0%81%D1%91%D0%96%D0%B6%D0%97%D0%B7%D0%98%D0%B8%D0%99%D0%B9%D0%9A%D0%BA%D0%9B%D0%BB%D0%9C%D0%BC%D0%9D%D0%BD%D0%9E%D0%BE%D0%9F%D0%BF%D0%A0%D1%80%D0%A1%D1%81%D0%A2%D1%82%D0%A3%D1%83%D0%A4%D1%84%D0%A5%D1%85%D0%A6%D1%86%D0%A7%D1%87%D0%A8%D1%88%D0%A9%D1%89%D0%AA%D1%8A%D0%AB%D1%8B%D0%AC%D1%8C%D0%AD%D1%8D%D0%AE%D1%8E%D0%AF%D1%8F1234567890%23%24%26*()%3A%3B.%2C%40%E2%84%96%3F!&directory");

@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:100italic,200italic,300italic,400italic,500italic,600italic,700italic,800italic,900italic,100,200,300,400,500,600,700,800,900);

.OpenSans{font-family:'PT Sans Narrow',sans-serif;}
				

H1. DIN Condensed Web

h2.Крупно

УСЛУГИ СТАТЬИ КОМПАНИЯ ПОРТФОЛИО

H4. Мелко

H5. Отдельные блоки текста
H6. Минимальные тексты

Лёгкий_Light_100 Регуляр_Regular_300 Нормаль_Normal_500 Жирный_Bold_600 Супер_Bold_700 Супер_Bold_800 Супер_Extra-Bold_900 small_НОРМАЛЬНЫЙ_500 small-small_НОРМАЛЬНЫЙ_500 small-small-small_НОРМАЛЬНЫЙ_500 small_ЖИРНЫЙ_900 small-small_ЖИРНЫЙ_900 small-small-small_ЖИРНЫЙ_900

Варианты кода для вставки в <head> и <style>:


@font-face{font-family:"DINCondensedWeb";src:url("http://ca0.ru/fonts/dnc57__w.eot");src:url("http://ca0.ru/fonts/dnc57__w.eot?iefix") format("eot"),url("http://ca0.ru/fonts/dnc57__w.woff") format("woff"),url("http://ca0.ru/fonts/dnc57__w.ttf") format("truetype"),url("http://ca0.ru/fonts/dnc57__w.svg#DINCondensedWeb") format("svg")}

.DINCondensedWeb{font-family:'DINCondensedWeb',sans-serif;}
				

H1. Graublau Sans Web

h2.Крупно

3.Заголовки

УСЛУГИ СТАТЬИ КОМПАНИЯ ПОРТФОЛИО

H5. Отдельные блоки текста
H6. Минимальные тексты

Лёгкий_Light_100 Регуляр_Regular_300 Нормаль_Normal_500 Жирный_Bold_600 Супер_Bold_700 Супер_Bold_800 Супер_Extra-Bold_900 small_НОРМАЛЬНЫЙ_500 small-small_НОРМАЛЬНЫЙ_500 small-small-small_НОРМАЛЬНЫЙ_500 small_ЖИРНЫЙ_900 small-small_ЖИРНЫЙ_900 small-small-small_ЖИРНЫЙ_900

Варианты кода для вставки в <head> и <style>:


@font-face{font-family:"Graublau Sans Web";font-style:normal;font-weight:300;src: url(http://ca0.ru/fonts/graublauweb.otf) format("opentype");}

.GraublauSansWeb{font-family:'Graublau Sans Web',sans-serif;}
				

H1. Graublau Sans Web Bold

h2.Крупно

УСЛУГИ СТАТЬИ КОМПАНИЯ ПОРТФОЛИО

H4. Мелко

H5. Отдельные блоки текста
H6. Минимальные тексты

Лёгкий_Light_100 Регуляр_Regular_300 Нормаль_Normal_500 Жирный_Bold_600 Супер_Bold_700 Супер_Bold_800 Супер_Extra-Bold_900 small_НОРМАЛЬНЫЙ_500 small-small_НОРМАЛЬНЫЙ_500 small-small-small_НОРМАЛЬНЫЙ_500 small_ЖИРНЫЙ_900 small-small_ЖИРНЫЙ_900 small-small-small_ЖИРНЫЙ_900

Варианты кода для вставки в <head> и <style>:


@font-face{font-family:"Graublau Sans Web Bold";font-style:bold;font-weight:900;src: url(http://ca0.ru/fonts/graublauwebbold.otf) format("opentype");}

.GraublauSansWebBold{font-family:'Graublau Sans Web Bold',sans-serif;}
				

H1. PT Sans (Regular)

h2.Крупно

H3. Заголовки

H4. Мелко

H5. Отдельные блоки текста
H6. Минимальные тексты

Лёгкий_Light_100 Регуляр_Regular_300 Нормаль_Normal_500 Жирный_Bold_600 Супер_Bold_700 Супер_Bold_800 Супер_Extra-Bold_900 small_НОРМАЛЬНЫЙ_500 small-small_НОРМАЛЬНЫЙ_500 small-small-small_НОРМАЛЬНЫЙ_500 small_ЖИРНЫЙ_900 small-small_ЖИРНЫЙ_900 small-small-small_ЖИРНЫЙ_900

Варианты кода для вставки в <head> и <style>:


@font-face{
	font-family:"PT Sans";
	src: url('http://ca0.ru/fonts/pts55f_w.eot');
	src: url('http://ca0.ru/fonts/pts55f_w.eot?#iefix') format('embedded-opentype'),
	url('http://ca0.ru/fonts/pts55f_w.woff') format('woff'),
	url('http://ca0.ru/fonts/pts55f_w.ttf') format('truetype'),
	url('http://ca0.ru/fonts/pts55f_w.svg#PTSansRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

.PTSansRegular{font-family:'PT Sans',sans-serif;}
			

H1. PT Sans Bold

h2.Крупно

УСЛУГИ СТАТЬИ КОМПАНИЯ ПОРТФОЛИО

H4. Мелко

H5. Отдельные блоки текста
H6. Минимальные тексты

Лёгкий_Light_100 Регуляр_Regular_300 Нормаль_Normal_500 Жирный_Bold_600 Супер_Bold_700 Супер_Bold_800 Супер_Extra-Bold_900 small_НОРМАЛЬНЫЙ_500 small-small_НОРМАЛЬНЫЙ_500 small-small-small_НОРМАЛЬНЫЙ_500 small_ЖИРНЫЙ_900 small-small_ЖИРНЫЙ_900 small-small-small_ЖИРНЫЙ_900

Варианты кода для вставки в <head> и <style>:


@font-face{
	font-family:"PT Sans Bold";
	src: url('http://ca0.ru/fonts/pts75f_w.eot');
	src: url('http://ca0.ru/fonts/pts75f_w.eot?#iefix') format('embedded-opentype'),
	url('http://ca0.ru/fonts/pts75f_w.woff') format('woff'),
	url('http://ca0.ru/fonts/pts75f_w.ttf') format('truetype'),
	url('http://ca0.ru/fonts/pts75f_w.svg#PTSansBold') format('svg');
	font-weight: normal;
	font-style: normal;
}

.PTSansBold{font-family:'PT Sans Bold',sans-serif;}
				

H1. PT Serif

h2.Крупно

УСЛУГИ СТАТЬИ КОМПАНИЯ ПОРТФОЛИО

H4. Мелко

H5. Отдельные блоки текста
H6. Минимальные тексты

Лёгкий_Light_100 Регуляр_Regular_300 Нормаль_Normal_500 Жирный_Bold_600 Супер_Bold_700 Супер_Bold_800 Супер_Extra-Bold_900 small_НОРМАЛЬНЫЙ_500 small-small_НОРМАЛЬНЫЙ_500 small-small-small_НОРМАЛЬНЫЙ_500 small_ЖИРНЫЙ_900 small-small_ЖИРНЫЙ_900 small-small-small_ЖИРНЫЙ_900

Варианты кода для вставки в <head> и <style>:


@font-face{font-family:'PT Serif';src:url("http://ca0.ru/fonts/ptf55f_w.eot");src:local("PT Serif"),url("http://ca0.ru/fonts/ptf55f_w.woff") format("woff"),url("http://ca0.ru/fonts/ptf55f_w.ttf") format("truetype"),url("http://ca0.ru/fonts/ptf55f_w.svg#PTSerif-Regular") format("svg")}

.PTSerifRegular{font-family:'PT Serif',sans-serif;}
				

H1. PT Sans Caption

h2.Крупно

УСЛУГИ СТАТЬИ КОМПАНИЯ ПОРТФОЛИО

H4. Мелко

H5. Отдельные блоки текста
H6. Минимальные тексты

Лёгкий_Light_100 Регуляр_Regular_300 Нормаль_Normal_500 Жирный_Bold_600 Супер_Bold_700 Супер_Bold_800 Супер_Extra-Bold_900 small_НОРМАЛЬНЫЙ_500 small-small_НОРМАЛЬНЫЙ_500 small-small-small_НОРМАЛЬНЫЙ_500 small_ЖИРНЫЙ_900 small-small_ЖИРНЫЙ_900 small-small-small_ЖИРНЫЙ_900

Варианты кода для вставки в <head> и <style>:


@font-face{font-family:'PT Sans Caption';src:url("http://ca0.ru/fonts/ptc55f_w.eot");src:local("PT Sans Caption"),url("http://ca0.ru/fonts/ptc55f_w.woff") format("woff"),url("http://ca0.ru/fonts/ptc55f_w.ttf") format("truetype"),url("http://ca0.ru/fonts/ptc55f_w.svg#PTSans-Caption") format("svg")}

.PTSansCaption{font-family:'PT Sans Caption',sans-serif;}
				

H1. Ubuntu

h2.Крупно

УСЛУГИ СТАТЬИ КОМПАНИЯ ПОРТФОЛИО

H4. Мелко

H5. Отдельные блоки текста
H6. Минимальные тексты

Лёгкий_Light_100 Регуляр_Regular_300 Нормаль_Normal_500 Жирный_Bold_600 Супер_Bold_700 Супер_Bold_800 Супер_Extra-Bold_900 small_НОРМАЛЬНЫЙ_500 small-small_НОРМАЛЬНЫЙ_500 small-small-small_НОРМАЛЬНЫЙ_500 small_ЖИРНЫЙ_900 small-small_ЖИРНЫЙ_900 small-small-small_ЖИРНЫЙ_900

Варианты кода для вставки в <head> и <style>:


<link href="http://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">

@import url(http://fonts.googleapis.com/css?family=Ubuntu&subset=latin,cyrillic-ext);

.Ubuntu{font-family:'Ubuntu',sans-serif;}
				
взять код на Google

H1. Ubuntu Condensed

УСЛУГИ СТАТЬИ КОМПАНИЯ ПОРТФОЛИО

H3. Заголовки

H4. Мелко

H5. Отдельные блоки текста
H6. Минимальные тексты

Лёгкий_Light_100 Регуляр_Regular_300 Нормаль_Normal_500 Жирный_Bold_600 Супер_Bold_700 Супер_Bold_800 Супер_Extra-Bold_900 small_НОРМАЛЬНЫЙ_500 small-small_НОРМАЛЬНЫЙ_500 small-small-small_НОРМАЛЬНЫЙ_500 small_ЖИРНЫЙ_900 small-small_ЖИРНЫЙ_900 small-small-small_ЖИРНЫЙ_900

Варианты кода для вставки в <head> и <style>:


<link href="http://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">

@import url(http://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=latin,cyrillic-ext);

.UbuntuCondensed{font-family:'Ubuntu Condensed',sans-serif;}
				
взять код на Google

H1. Open Sans

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

(Н.В. Гоголь)

 

H1. Open Sans Condensed

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

(Н.В. Гоголь)

 

H1. Roboto Condensed

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

(Н.В. Гоголь)

 

H1. PT Sans Narrow

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

(Н.В. Гоголь)

 

H1. DIN Condensed Web

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

(Н.В. Гоголь)

 

H1. Graublau Sans Web

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

(Н.В. Гоголь)

 

H1. Graublau Sans Web Bold

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

(Н.В. Гоголь)

 

H1. PT Sans (Regular)

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

(Н.В. Гоголь)

 

H1. PT Sans Bold

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

(Н.В. Гоголь)

 

H1. PT Serif Regular

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

(Н.В. Гоголь)

 

H1. PT Sans Caption

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

(Н.В. Гоголь)

 

H1. Ubuntu

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

(Н.В. Гоголь)

 

H1. Ubuntu Condensed

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

(Н.В. Гоголь)

 

Дополнения и примечания

Подключение шрифта к странице

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

Подключить выбранные шрифты можно одним из трёх путей:

  1. Через элемент <link>, вставляемый на страницу внутри <head>. Строка будет иметь примерно следующий вид:
    
    <link href='http://fonts.googleapis.com/css?family=FONTS&subset=cyrillic' rel='stylesheet' type='text/css'>
    				
  2. Через правило @import. Такую строку вставляем в свой CSS-файл в самом верху.
    
    @import url(http://fonts.googleapis.com/css?family=FONTS&subset=cyrillic);
    				
  3. 3. Через JavaScript (не рассматривается).

CSS - устойчивый к ошибкам синтаксис @font-face

@font-face от Fontspring

@font-face {
font-family: "OctinSports";
src: url("fonts/octinsports.eot");
src: url("fonts/octinsports.eot?#iefix") format("embedded-opentype"),
url("fonts/octinsports.woff") format("woff"),
url("fonts/octinsports.ttf") format("truetype"),
url("fonts/octinsports.svg#OctinSports") format("svg");
font-weight: normal;
font-style: normal;
}
		
тут подробнее

Запрос шрифта

Можно использовать разные варианты запросов шрифта. Стоит помнить, что не стоит грузить пользователя всеми вариантами написания шрифта, курсивом, жирным, светлым, сжатым и проч. Кроме большого трафика, это ещё и избыточная информация. В каких-то случаях целесообразно отобрать для загрузки только символы необходимые для контента.

Пример запроса из сервиса fonts.google.
Шрифт Ubuntu, двух начертаний 400normal,700normal с использованием выборки конкретных символов(алфавит + цифры и основные знаки пунктуации) языка cyrillic. Латиница из fonts.google загружается всегда автоматически и избавиться от её загрузки невозможно. Привет Брин :) За основу взят стандартный запрос:
@import url(http://fonts.googleapis.com/css?family=Ubuntu:400normal,700normal&subset=cyrillic);
Вычислены необходимые символы кириллицы:
АаБбВвГгДдЕеЁёЖжЗзИиЙйКкЛлМмНнОоПпРрСсТтУуФфХхЦцЧчШшЩщЪъЫыЬьЭэЮюЯя1234567890#$&*():;.,@№?!
этот набор символов перекодирован с помощью онлай-сервиса в URL Encode (шестнадцатиричная кодировка символов), а результат перекодировки вставлен в запрос следующим образом:
Первая часть стандартного запроса:
@import url("//fonts.googleapis.com/css?family=PT+Sans+Narrow:400normal,700normal&subset=cyrillic
+
&directory&text=
+ результат перекодировки:

%D0%90%D0%B0%D0%91%D0%B1%D0%92%D0%B2%D0%93%D0%B3%D0%94%D0%B4%D0%95%D0%B5%D0%81%D1%91%D0%96%D0%B6%D0%97%D0%B7%D0%98%D0%B8%D0%99%D0%B9%D0%9A%D0%BA%D0%9B%D0%BB%D0%9C%D0%BC%D0%9D%D0%BD%D0%9E%D0%BE%D0%9F%D0%BF%D0%A0%D1%80%D0%A1%D1%81%D0%A2%D1%82%D0%A3%D1%83%D0%A4%D1%84%D0%A5%D1%85%D0%A6%D1%86%D0%A7%D1%87%D0%A8%D1%88%D0%A9%D1%89%D0%AA%D1%8A%D0%AB%D1%8B%D0%AC%D1%8C%D0%AD%D1%8D%D0%AE%D1%8E%D0%AF%D1%8F1234567890%23%24%26*()%3A%3B.%2C%40%E2%84%96%3F!
+
&directory");
Итог:


@import url("//fonts.googleapis.com/css?family=PT+Sans+Narrow:400normal,700normal&subset=cyrillic&directory&text=%D0%90%D0%B0%D0%91%D0%B1%D0%92%D0%B2%D0%93%D0%B3%D0%94%D0%B4%D0%95%D0%B5%D0%81%D1%91%D0%96%D0%B6%D0%97%D0%B7%D0%98%D0%B8%D0%99%D0%B9%D0%9A%D0%BA%D0%9B%D0%BB%D0%9C%D0%BC%D0%9D%D0%BD%D0%9E%D0%BE%D0%9F%D0%BF%D0%A0%D1%80%D0%A1%D1%81%D0%A2%D1%82%D0%A3%D1%83%D0%A4%D1%84%D0%A5%D1%85%D0%A6%D1%86%D0%A7%D1%87%D0%A8%D1%88%D0%A9%D1%89%D0%AA%D1%8A%D0%AB%D1%8B%D0%AC%D1%8C%D0%AD%D1%8D%D0%AE%D1%8E%D0%AF%D1%8F1234567890%23%24%26*()%3A%3B.%2C%40%E2%84%96%3F!&directory");
			

О кодировке:  

все символы кодировки URL

онлайн перекодировщик символов между кодировками (очень много вариантов в списке)

онлайн перекодировщик символов URL Decoder/Encoder