Описание как внедрить свой шрифт в шаблон JoomlaРаботает в:- Chrome 0.3+
- Firefox 3.5+
- Internet Explorer 4+
- Opera 10+
- Safari 3.1+
Итак, мы хотим использовать на своем сайте сторонний шрифт, который нам(или дизайнеру) приглянулся.
Допустим он называется
disneypark.ttf(111КБ).
Этот шрифт мы можем легко импортировать в свою таблицу стилей, используя @font-face правило в CSS.
Создадим в шаблоне папку
fonts и положим туда наш шрифт. Пропишем в основном css-файле нашего шаблона такой код:
@font-face {
font-family: 'DisnayPark';
src:
local('DisnayPark'),
url('../fonts/disneypark.ttf') format('truetype');
}
Теперь мы можем использовать созданный шрифт:
p{
font-family: 'DisnayPark';
}
Но радоваться рано. Не все браузеры скушают truetype шрифт(а
некоторые даже такой записи не поймут).
Для кроссбраузерного добавления шрифтов имеется два прекрасных сервиса:
- Google Webfonts
- Fontsquirrel
Google Webfonts позволяет подключить любой доступный сервису шрифт путем добавления в документ ссылки на внешний файл css-стилей:
<link href='http://fonts.googleapis.com/css?family=Marck+Script&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
Далее, в CSS шаблона просто пишем:
h1, h2{
font-family: 'Marck Script', cursive;
}
Список доступных шрифтов, а также код подключения можно найти здесь:
www.google.com/webfontsДокументация к сервису:
developers.google.com/webfonts/docs/getting_startedВторой сервис, помимо репозитория шрифтов, предоставляет генератор кроссбраузерного набора шрифтов и css-кода для их подключения.
Идем на
www.fontsquirrel.com , заходим в раздел
generator .
Загружаем свой шрифт, нажав кнопку
Add Fonts, далее по желанию можно выставить свои настройки( я отметил флажок WebOnly, и настрил набор глифов(Lowercase, Uppercase, Numbers, Cyrrillyc, Basic Latin).
В итоге получаем архив с кроссбраузерным набором шрифтов. Причем у меня вес шрифтов получился таким:
disneypark-webfont.ttf - 62КБ
disneypark-webfont.etf - 63КБ
disneypark-webfont.woff -
33КБdisneypark-webfont.svg - 94КБ
Ложим все эти шрифты в папку fonts шаблона.
Далее вписываем код из stylesheet.css в основной css-файл шаблона, поправив пути шрифтов(меняем
disneypark-webfont.eot на
../fonts/disneypark-webfont.eot и другие онологично)
Белка сгенерировала немного другое имя шрифта -
DisneyParkRegular, поэтому чтобы применить шрифт пишем чета типа
p{
font-family: 'DisneyParkRegular', sans-serif;
}
TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT fonts for Internet Explorer 4+
WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG fonts for iPad and iPhone
Что есть что:TrueType - A format designed to look good on-screen. Recommended particularly for Windows browsers.
OpenType (CFF) - This format is better for print work and does not always look good on Windows.
EOT - You need this format if you want to target Internet Explorer. IE will not use any other format. Our EOT's would be considered "Lite," since they are neither compressed nor domain-restricted.
SVG - This is an XML format supported by some browsers including the iPhone and iPad.
WOFF - This cross-browser, web-only font format is lightweight (font data is zip compressed) and can be compiled with either TrueType or PostScript (CFF) outlines. It is currently supported by Firefox 3.6+.
Статья на хабре про font-face:
Прекрасные шрифты посредством @font-faceFontsquirrel иногда отказывается конвертировать шрифт. В таком случае можно воспользоваться одним из альтернативных конвертеров. Перечислены они
тут.
PS. Кто разбирается, подскажите как настроить gzip-сжатие для файлов eot, ttf и особенно svg.Спасибо
doctorgrif'у за информацию. Читаем
Ответ #25Следует отметить, что с вебшрифтами могут наблюдаться проблемы в Опере. Кроме того, не стоит рассчитывать на 100% одинаковое и верное отображение шрифтов во всех браузерах.
Хотя в большинстве случаев все хорошо.
Голосование
29.09.2015, 13:29:19