[SVG]Свой шрифт для сайта

Next

Регистрация
29.09.14
Сообщения
10,397
Симпатии
1,123
Онлайн
33d 10ч 23м
#1
Что такое @font-face?

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

Шрифты могут быть в форматах

Пожалуйста, войдите или зарегистрируйтесь для просмотра текста.

,

Пожалуйста, войдите или зарегистрируйтесь для просмотра текста.

,

Пожалуйста, войдите или зарегистрируйтесь для просмотра текста.

,

Пожалуйста, войдите или зарегистрируйтесь для просмотра текста.

и

Пожалуйста, войдите или зарегистрируйтесь для просмотра текста.

:
  • Internet Explorer (все версии) — EOT;
  • Firefox (начиная с 3.5) — TTF/OTF (WOFF добавлен с версии 3.6);
  • Opera (начиная с 10) — TTF/OTF;
  • Chrome (все версии) — SVG (TTF/OTF добавлены в конце января 2010-го);
  • Safari (начиная с 3.2) — TTF/OTF.
Как видим, у нас есть минимум три типа файлов, которые нужно подгружать.

Где его взять?

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

Пожалуйста, войдите или зарегистрируйтесь для просмотра текста.

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

Пожалуйста, войдите или зарегистрируйтесь для просмотра текста.

, он генерирует без проблем все шрифты, так же можно на нем при необходимости просто переконвертировать нужные.
Вот еще несколько шрифтовых ресурсов.


Пожалуйста, войдите или зарегистрируйтесь для просмотра текста.

- можно скачать шрифт (без @font-face) и подключить к сайту, только от них.

Пожалуйста, войдите или зарегистрируйтесь для просмотра текста.

- можно скачать и просто шрифт, и @font-face.

Пожалуйста, войдите или зарегистрируйтесь для просмотра текста.

- мне больше всех нравиться. Можно скачать и просто шрифт, и @font-face, и подключить от них.

Как прикрутить?

Я не буду описывать подключение с сайта со шрифтами (если посмотрели ссылки указанные выше, поймете), будем использовать шрифт, который уже скачан. Заливаем его к себе на сайт, предварительно создав для него папку например так:
Код:
/styles/ВАШ СТИЛЬ/xenforo/fonts/
В папке должны быть минимум три шрифта с расширением: .eot, .ttf и .woff, так как .otf и .svg, могут не всегда присутствовать, это не страшно.
Открываем EXTRA.css и вносим:

Код:
/* <----- start FONTS ------->*/
@font-face {
font-family: 'ВАШ ШРИФТ';
src: url('./styles/ВАШ СТИЛЬ/xenforo/fonts/ВАШ ШРИФТ.eot');
src: url('./styles/ВАШ СТИЛЬ/xenforo/fonts/ВАШ ШРИФТ.ttf') format("truetype"),
url('./styles/ВАШ СТИЛЬ/xenforo/fonts/ВАШ ШРИФТ.woff') format('woff'),
url('./styles/ВАШ СТИЛЬ/xenforo/fonts/ВАШ ШРИФТ.eot?#iefix') format('embedded-opentype'),
url('./styles/ВАШ СТИЛЬ/xenforo/fonts/ВАШ ШРИФТ.svg#ecliptic') format('svg');
font-style: normal;
font-weight: normal;
}
/* <----- END FONTS ------->*/
Со шрифтом обычно бывает css файлик и в нем можно посмотреть, что добавить в EXTRA.css.

К чему прикрутить?

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