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

ꜛ

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("/fonts/dnc57__w.eot");src:url("/fonts/dnc57__w.eot?iefix") format("eot"),url("/fonts/dnc57__w.woff") format("woff"),url("/fonts/dnc57__w.ttf") format("truetype"),url("/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(/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(/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('/fonts/pts55f_w.eot');
	src: url('/fonts/pts55f_w.eot?#iefix') format('embedded-opentype'),
	url('/fonts/pts55f_w.woff') format('woff'),
	url('/fonts/pts55f_w.ttf') format('truetype'),
	url('/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('/fonts/pts75f_w.eot');
	src: url('/fonts/pts75f_w.eot?#iefix') format('embedded-opentype'),
	url('/fonts/pts75f_w.woff') format('woff'),
	url('/fonts/pts75f_w.ttf') format('truetype'),
	url('/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("/fonts/ptf55f_w.eot");src:local("PT Serif"),url("/fonts/ptf55f_w.woff") format("woff"),url("/fonts/ptf55f_w.ttf") format("truetype"),url("/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("/fonts/ptc55f_w.eot");src:local("PT Sans Caption"),url("/fonts/ptc55f_w.woff") format("woff"),url("/fonts/ptc55f_w.ttf") format("truetype"),url("/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

  ꜛ

Вёрстка

Page Blocks Masonry. Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

Свёрстано на основе Page Blocks Masonry, шрифт body Exo 2 | 2014-17 | AntonyBark | Права принадлежат всем.