emptinessandform
@emptinessandform

Не могу понять надо ли мне подключать шрифт или нет?

я впервые подключаю шрифты.

У меня в шаблоне 5 шрифтов:
HelveticaNeueCyr-Bold
HelveticaNeueCyr-Light
HelveticaNeueCyr-LightItalick
HelveticaNeueCyr-Roman
HelveticaNeueCyr-Thin

По моему Helvetica есть в браузере, но а эти вариации? и как их повторить в точности как в psd макете?
  • Вопрос задан
  • 685 просмотров
Решения вопроса 2
YuriMolotov
@YuriMolotov
Дизайн и вёрстка сайтов — Molotov.pro
В браузере (как и в любой другой программе) шрифтов нет. Шрифты установлены в операционной системе компьютера. Соответственно, установленная и отображаемая у вас Helvetica у других пользователей сайта будет заменена на шрифт по-умолчанию (напр. Times New Roman).
В подключении не нуждаются стандартные шрифты, принудительно установленные у всех: Arial, Tahoma, Verdana и т.д.

Чтобы подключить свой кастомный шрифт на сайт надо разместить его файлы на хостинге и подключить с помощью font-face в стилях:

@font-face {
    font-family: Bebas;
    src: url('http://tottem.ru/wp-content/themes/ipinpro/font/bebasneue_bold.eot');
    src: url('http://tottem.ru/wp-content/themes/ipinpro/font/bebasneue_bold.eot?#iefix') format('embedded-opentype'),
         url('http://tottem.ru/wp-content/themes/ipinpro/font/bebasneue_bold.woff') format('woff'),
         url('http://tottem.ru/wp-content/themes/ipinpro/font/bebasneue_bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


Для каждого начертания по четыре файла в разных форматах для разных браузеров (cконвертировать можно через онлайн-конвертеры), или хотя бы только ttf или otf для распространённых.

"Bebas" меняете на удобное вам имя, например "HB", "HL" и т.д.
В урл указываете адрес начертания на хостинге (можно неполный).

Всё. Далее в стилях у нужных элементов задаёте в font-family нужный шрифт через заданное имя:
h1 {
font-family: HB;
}
.thin {
font-family: HL;
}
Ответ написан
@Chekhoved
Не знаю, есть ли в браузере, а скачать или же сразу подключить можно здесь - fonts4web.ru/helvetica.html
Там есть и инструкция по подключению
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы