Установка @font-face для форума XenForo

Что такое @font-face?

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

Шрифты могут быть в форматах TTF, OTF, EOT, SVG и WOFF:

• 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.

Как видим, у нас есть минимум три типа файлов, которые нужно подгружать.

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

Для того, чтобы каждый раз не тратить кучу времени на создание нескольких шрифтовых файлов и разного синтаксиса подключения, хорошие люди сделали сервис — Шрифтовая белка. Заходим, загружаем шрифт, получаем архив с примером использования и необходимыми типами файлов.
Но из опыта знаю, что далеко не все шрифты принимает белочка. Можно еще воспользоваться font2web, но там нет настроек и не гарантирую, что шрифт, сконвертируемый, будет с кириллицей.
Советую посмотреть - Некоторые ресурсы по использованию CSS.

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

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

Код:

/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.

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

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

 

Шрифт логотипа XF-Russia.ru

Нашел шрифт, используемый в логотипе сайта XF-Russia.ru



Это шрифт BeastvsST. Архив можете скачать ниже, а для подключения, действуем по инструкции, описанной выше. В архиве имеется файл fonts.css, отредактируйте пути к файлам шрифта и добавьте в нужный стиль css.

 

Есть шрифт Anonymous Pro, который хорошо подходит для отображения кода. Сконвертировал его в веб шрифт и установил на сайте, получилось неплохо:



Установка, как выше, только у меня папка для шрифтов в корне. В EXTRA.css:

Код:

@font-face {
    font-family: 'Anonymous Pro';
    src: url('./fonts/Anonymous Pro.eot');
    src: local('☺'), url('./fonts/Anonymous Pro.woff') format('woff'), url('./fonts/Anonymous Pro.ttf') format('truetype'), url('./fonts/Anonymous Pro.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

В Настройках стиля, Элементы ВВ-кодов, ВВ-коды: тег Pre/Code, Текст, Шрифт - 'Anonymous Pro'. Если установлен аддон для подсветки кода, так не прокатит .

 

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