Шрифт для сайта

Шрифт довольно сильно влияет на дизайн landing page. Дело в том, что Лендинг Пейдж это всего одна большая страница, где текста совсем мало и то, как этот
текст сочетается с оформлением лендинга очень важно. Изменив шрифт можно поменять восприятие продающей страницы потенциальным клиентом.

При создании продающей страницы дизайнер по своему усмотрению выбирает шрифт, а верстальщик должен обеспечить с помощью языка разметки html и языка стилей
css правильное отображение шрифта во всех браузерах.

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

Ссылка на шрифт обычно указывается в файле css в самом его начале вот так

@font-face {

font-family: supersgrift; /* Гарнитура шрифта */

src: url(fonts/supersgrift.eot); /* Для IE5-8 */

src: local(supersgrift), url(fonts/supersgrift.ttf); /* Для остальных браузеров */

}

Эта запись обозначает что шрифт получил название supersgrift которое можно будет использовать во всех записях css . Сам файл шрифта имеется в двух
вариантах eot и ttf и находится В папке fonts

Файл шрифта в нескольких вариантах как уже понятно используется из за разных браузеров, вот таблица в которой указано какой браузер умеет читать какой тип
файла шрифта

Табл. Поддерживаемые форматы

шрифты и браузеры

Как видно из таблицы самый поддерживаемый формат — TTF.

Если у вас есть файл шрифта в любом из его форматов то оставшиеся форматы можно сконвертировать на онлайн сервисе конвертации например font2web.com

Если вы сотрудничаете с хорошим дизайнером то вместе с дизайном он пришлет вам все виды файлов шрифта или хотя бы в файле дизайна оставит в текстовом виде
надписи по которым можно узнать название шрифта и найти его в Интернет.

Но бывают такие дизайнеры которые шрифт делают в виде картинок и узнать что это за шрифт сразу невозможно . Но и из этой ситуации есть выход это онлайн
Сервис распознавания Шрифтов с картинки myfonts.com/WhatTheFonts

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

Однако прежде чем устанавливать шрифт к себе на Лендинг Пейдж нужно не забывать про авторские права. Есть шрифты бесплатные, а есть платные и если вы
делаете проедающую страницу для западного заказчика, где соблюдаются авторские права это нужно иметь ввиду

Хорошая альтернатива платным шрифтам это бесплатная коллекция шрифтов от Гугла.

Эти шрифты быстрее грузятся на landing page, тем самым ускоряя время загрузки лендинга.

Кроме того эти шрифты более гибко настраиваются.

Например: можно подключить только кириллицу или только латиницу или жирное начертание или только обычное.

В то время как файл ttf содержит в себе все виды начертания шрифта, тем самым делая этот файл большим и замедляющим загрузку продающей страницы

Выбрать Гугл Шрифт можно на странице

Google.com/webfonts

Там же вы найдете код, который нужно вставить в код Лендинг Пейдж

Подключить гугл шрифты можно двумя способами

1. Через тег <link>

<link href=’http://fonts.googleapis.com/css?family=supersgrift&subset=cyrillic’ rel=’stylesheet’ type=’text/css’>

2. Через CSS, обычно в самом начале файла

@import url(http://fonts.googleapis.com/css?family=supersgrift&subset=cyrillic);

Еще одно преимущество применения Гугл шрифтов

Браузер определяется автоматически и загружается шрифт в нужном формате TTF, EOT, WOFF, SVG , EOT после проверки браузера.

Written by sergei