Шрифт Echoes Slab

Шрифт Echoes Slab

Начертания, входящие в состав архива со шрифтом: Regular, Bold, Italic, Light, LightItalic, BoldItalic, BlackItalic, Medium, MediumItalic, Black, Thin, ThinItalic, .

Проверить русский шрифт Echoes Slab в действии

Введите или вставьте URL адрес страницы, к которой хотите применить шрифт:

Ниже напечатайте текст для проверки или вставьте HTML код из редактора. Также, вы можете выбрать начертание, размер шрифта и его регистр. Поддерживаются Emmet сокращения для тестирования верстки.

Введите текст здесь...
---

Как установить шрифт в ОС

Для установки русского шрифта Echoes Slab в операционную систему, скопируйте файлы из архива, которые имеют расширение *.ttf в системную папку со шрифтами или воспользуйтесь штатным установщиком шрифтов. Для OC семейства Windows, папка со шрифтами находится здесь:
C:/Windows/Fonts.

После установки, шрифт Echoes Slab автоматически появится в списке шрифтов Photoshop.

---

Подключение шрифта Echoes Slab в CSS

1. Для того, чтобы установить шрифт Echoes Slab в свой HTML-проект, сперва скопируйте содержимое архива в папку /fonts, которая должна лежать в той-же директории, что и папка /css вашего HTML сайта.

Структура проекта после установки шрифтов:
/ (корневой каталог шаблона или проекта)
/fonts (Шрифты из архива распаковываем в папку /fonts) /EchoesSlabRegular
/EchoesSlabBold
/EchoesSlabItalic
/EchoesSlabLight
/EchoesSlabLightItalic
/EchoesSlabBoldItalic
/EchoesSlabBlackItalic
/EchoesSlabMedium
/EchoesSlabMediumItalic
/EchoesSlabBlack
/EchoesSlabThin
/EchoesSlabThinItalic
/css (Папка со стилями должна находиться в той-же категории, что и /fonts) /stylename.css (Файл стилей, в котором подключаются русские шрифты)

2. Далее вставляем код, указанный ниже, в файл стилей, который должен находиться в папке /css.

Выделить код
/* Код для подключения шрифта в /css/stylename.css */
/* font-family: "EchoesSlabRegular"; */
@font-face {
    font-family: "EchoesSlabRegular";
    src: url("../fonts/EchoesSlabRegular/EchoesSlabRegular.eot");
    src: url("../fonts/EchoesSlabRegular/EchoesSlabRegular.eot?#iefix")format("embedded-opentype"),
    url("../fonts/EchoesSlabRegular/EchoesSlabRegular.woff") format("woff"),
    url("../fonts/EchoesSlabRegular/EchoesSlabRegular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* font-family: "EchoesSlabBold"; */ @font-face { font-family: "EchoesSlabBold"; src: url("../fonts/EchoesSlabBold/EchoesSlabBold.eot"); src: url("../fonts/EchoesSlabBold/EchoesSlabBold.eot?#iefix")format("embedded-opentype"), url("../fonts/EchoesSlabBold/EchoesSlabBold.woff") format("woff"), url("../fonts/EchoesSlabBold/EchoesSlabBold.ttf") format("truetype"); font-style: normal; font-weight: normal; }
/* font-family: "EchoesSlabItalic"; */ @font-face { font-family: "EchoesSlabItalic"; src: url("../fonts/EchoesSlabItalic/EchoesSlabItalic.eot"); src: url("../fonts/EchoesSlabItalic/EchoesSlabItalic.eot?#iefix")format("embedded-opentype"), url("../fonts/EchoesSlabItalic/EchoesSlabItalic.woff") format("woff"), url("../fonts/EchoesSlabItalic/EchoesSlabItalic.ttf") format("truetype"); font-style: normal; font-weight: normal; }
/* font-family: "EchoesSlabLight"; */ @font-face { font-family: "EchoesSlabLight"; src: url("../fonts/EchoesSlabLight/EchoesSlabLight.eot"); src: url("../fonts/EchoesSlabLight/EchoesSlabLight.eot?#iefix")format("embedded-opentype"), url("../fonts/EchoesSlabLight/EchoesSlabLight.woff") format("woff"), url("../fonts/EchoesSlabLight/EchoesSlabLight.ttf") format("truetype"); font-style: normal; font-weight: normal; }
/* font-family: "EchoesSlabLightItalic"; */ @font-face { font-family: "EchoesSlabLightItalic"; src: url("../fonts/EchoesSlabLightItalic/EchoesSlabLightItalic.eot"); src: url("../fonts/EchoesSlabLightItalic/EchoesSlabLightItalic.eot?#iefix")format("embedded-opentype"), url("../fonts/EchoesSlabLightItalic/EchoesSlabLightItalic.woff") format("woff"), url("../fonts/EchoesSlabLightItalic/EchoesSlabLightItalic.ttf") format("truetype"); font-style: normal; font-weight: normal; }
/* font-family: "EchoesSlabBoldItalic"; */ @font-face { font-family: "EchoesSlabBoldItalic"; src: url("../fonts/EchoesSlabBoldItalic/EchoesSlabBoldItalic.eot"); src: url("../fonts/EchoesSlabBoldItalic/EchoesSlabBoldItalic.eot?#iefix")format("embedded-opentype"), url("../fonts/EchoesSlabBoldItalic/EchoesSlabBoldItalic.woff") format("woff"), url("../fonts/EchoesSlabBoldItalic/EchoesSlabBoldItalic.ttf") format("truetype"); font-style: normal; font-weight: normal; }
/* font-family: "EchoesSlabBlackItalic"; */ @font-face { font-family: "EchoesSlabBlackItalic"; src: url("../fonts/EchoesSlabBlackItalic/EchoesSlabBlackItalic.eot"); src: url("../fonts/EchoesSlabBlackItalic/EchoesSlabBlackItalic.eot?#iefix")format("embedded-opentype"), url("../fonts/EchoesSlabBlackItalic/EchoesSlabBlackItalic.woff") format("woff"), url("../fonts/EchoesSlabBlackItalic/EchoesSlabBlackItalic.ttf") format("truetype"); font-style: normal; font-weight: normal; }
/* font-family: "EchoesSlabMedium"; */ @font-face { font-family: "EchoesSlabMedium"; src: url("../fonts/EchoesSlabMedium/EchoesSlabMedium.eot"); src: url("../fonts/EchoesSlabMedium/EchoesSlabMedium.eot?#iefix")format("embedded-opentype"), url("../fonts/EchoesSlabMedium/EchoesSlabMedium.woff") format("woff"), url("../fonts/EchoesSlabMedium/EchoesSlabMedium.ttf") format("truetype"); font-style: normal; font-weight: normal; }
/* font-family: "EchoesSlabMediumItalic"; */ @font-face { font-family: "EchoesSlabMediumItalic"; src: url("../fonts/EchoesSlabMediumItalic/EchoesSlabMediumItalic.eot"); src: url("../fonts/EchoesSlabMediumItalic/EchoesSlabMediumItalic.eot?#iefix")format("embedded-opentype"), url("../fonts/EchoesSlabMediumItalic/EchoesSlabMediumItalic.woff") format("woff"), url("../fonts/EchoesSlabMediumItalic/EchoesSlabMediumItalic.ttf") format("truetype"); font-style: normal; font-weight: normal; }
/* font-family: "EchoesSlabBlack"; */ @font-face { font-family: "EchoesSlabBlack"; src: url("../fonts/EchoesSlabBlack/EchoesSlabBlack.eot"); src: url("../fonts/EchoesSlabBlack/EchoesSlabBlack.eot?#iefix")format("embedded-opentype"), url("../fonts/EchoesSlabBlack/EchoesSlabBlack.woff") format("woff"), url("../fonts/EchoesSlabBlack/EchoesSlabBlack.ttf") format("truetype"); font-style: normal; font-weight: normal; }
/* font-family: "EchoesSlabThin"; */ @font-face { font-family: "EchoesSlabThin"; src: url("../fonts/EchoesSlabThin/EchoesSlabThin.eot"); src: url("../fonts/EchoesSlabThin/EchoesSlabThin.eot?#iefix")format("embedded-opentype"), url("../fonts/EchoesSlabThin/EchoesSlabThin.woff") format("woff"), url("../fonts/EchoesSlabThin/EchoesSlabThin.ttf") format("truetype"); font-style: normal; font-weight: normal; }
/* font-family: "EchoesSlabThinItalic"; */ @font-face { font-family: "EchoesSlabThinItalic"; src: url("../fonts/EchoesSlabThinItalic/EchoesSlabThinItalic.eot"); src: url("../fonts/EchoesSlabThinItalic/EchoesSlabThinItalic.eot?#iefix")format("embedded-opentype"), url("../fonts/EchoesSlabThinItalic/EchoesSlabThinItalic.woff") format("woff"), url("../fonts/EchoesSlabThinItalic/EchoesSlabThinItalic.ttf") format("truetype"); font-style: normal; font-weight: normal; }
Русские шрифты в комплектации TTF + WOFF + EOT