Внедрение своих шрифтов на сайт (опрос + решение)

[danik.html]

Описание как внедрить свой шрифт в шаблон 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-face

Fontsquirrel иногда отказывается конвертировать шрифт. В таком случае можно воспользоваться одним из альтернативных конвертеров. Перечислены они тут.

PS. Кто разбирается, подскажите как настроить gzip-сжатие для файлов eot, ttf и особенно svg.
Спасибо doctorgrif'у за информацию. Читаем Ответ #25

Следует отметить, что с вебшрифтами могут наблюдаться проблемы в Опере. Кроме того, не стоит рассчитывать на 100% одинаковое и верное отображение шрифтов во всех браузерах.
Хотя в большинстве случаев все хорошо.

[Infosakh]

сейчас буду снова пробовать 

[Infosakh]

вообщем делал все вроде правильно, прописал в css
@font-face {
   font-family: 'SeasideResortNFRegular';
   src: url('seasrn-webfont.eot');
   src: local('☺'), url('../fonts/seasrn-webfont.woff') format('woff'), url('../fonts/seasrn-webfont.ttf') format('truetype'), url('../fonts/seasrn-webfont.svg#webfontoJszeUjQ') format('svg');
   font-weight: normal;
   font-style: normal;
}

h3{
   font-family: 'SeasideResortNFRegular';
}
З.Ы. вместо p я прописал h3
закинул шрифты в папку fonts, созданную в шаблоне темы.
Ни  в опере, ни в ie стиль h3 не отображается. Ставил вместо h3 p тоже ничего не изменилось 

[danik.html]

Значит у тебя правила гдето переопределяются. смоти в FireBug . или выкладывай ссыль на сайт. Или пропиши
h3{
   font-family: 'SeasideResortNFRegular' !important;
}
А как в ff?
И еще, ты забыл путь eot поправить.

[Infosakh]

вставил
h3{
   font-family: 'SeasideResortNFRegular' !important;
}
ничего не дало.

А как в ff?

тоже не кажет.

И еще, ты забыл путь eot поправить.

добавил, не изменилось ничего.

Значит у тебя правила гдето переопределяются. смоти в FireBug

я тут только могу выложить что там в FireBug у мну показывается, сам я ничего не пойму 
З.Ы. Ссылку я дать не могу, вернее могу, но на сайт зайти не сможет никто, у меня только жители острова могут зайти ))))

[Infosakh]

сейчас попробую другой шрифт подцепить, может этот шрифт глючный 

[Infosakh]

да и еще один момент, когда генерирую шрифты, через сервис, оставляю этот пункт CSS Formats: в дефолте, тобишь  Bulletproof (Smiley) и пункт CSS Options: без каких либо галок.

[Infosakh]

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

[danik.html]

Давай скрин букашки

[Infosakh]

вот, хэдер  

[danik.html]

Да..картина конешно ужасная...
хедер ни о чем не говорит(разве только что там тонны всякой лишней фигни). Ты сделай скрин h3. И непонятно ты куфон или font-face используешь

[Infosakh]

Да..картина конешно ужасная...
хедер ни о чем не говорит(разве только что там тонны всякой лишней фигни). Ты сделай скрин h3. И непонятно ты куфон или font-face используешь

ну я ж грю, куфон тоже отключал, я и боди смотрел, почему то нет кода от фонт-фэйса 

[Infosakh]

З.Ы. Там нет фигни, всё по делу используется 

[danik.html]

Infosakh, проблему решил? Если да, можешь дать ссыльку поглядеть?

[Infosakh]

к сожалению нет, пока оставил как есть, h1 выводится обычным шрифтом, я вот думаю, может это конфликтует мутулс с квери? 

[danik.html]

гмм.. так у тя всетаки куфон? я думал ты font-face ставишь...тогда причем тут js нипонятна...

[Infosakh]

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

[danik.html]

Давай скрин букашки

[Infosakh]

так я же давал http://joomlaforum.ru/index.php/topic,133343.msg729319.html#msg729319

[danik.html]

Да нафига мне твой хеад. Ты наведи на h3  и покажи че букашка кажет - ну там стили сбоку должны быть....А куча линков и скриптов в хеаде я уже сказал как называется (кто не слышал - слово на букву "г")

[artdent]

а без @font-face можно поставить шрифты?

[danik.html]

а без @font-face можно поставить шрифты?

Да, есть костыли, позволяющие делать это без @font-face'а...

[artdent]

Да, есть костыли, позволяющие делать это без @font-face'а...

а можно ссылку хотя бы на один костыль
спасибо

[doctorgrif]

а можно ссылку хотя бы на один костыль
спасибо

гуглить по sirf

[danik.html]

а можно ссылку хотя бы на один костыль
спасибо

А для чего это можно услышать?

[doctorgrif]

PS. Кто разбирается, подскажите как настроить gzip-сжатие для файлов eot, ttf и особенно svg.

http://www.phpied.com/gzip-your-font-face-files/
http://www.phpied.com/font-face-gzipping-take-ii/
+
htaccess типа

Код:

#FontCompression
 AddType application/ .eot
 AddType application/octet-stream      .ttf .otf .woff
 SetOutputFilter DEFLATE

или

<FilesMatch \.(eot|ttf|otf|svg)$>
        ExpiresDefault "access plus 10 years"
</FilesMatch>
ExpiresByType application/x-font-opentype A315360000
ExpiresByType application/x-font-truetype A315360000
ExpiresByType application/x-font-ttf A315360000
ExpiresByType application/x-font A315360000
ExpiresByType font/opentype A315360000
ExpiresByType font/otf A315360000
ExpiresByType application/vnd.oasis.opendocument.formula-template A315360000
ExpiresByType image/svg+xml A315360000
ExpiresByType application/vnd.ms-fontobject A315360000
ExpiresByType font/woff A315360000

подробнее
http://codezroz.com/php/font-mime-types/
+
http://salscode.com/web-resources/gzip-ttf-otf
http://stackoverflow.com/questions/2042052/how-to-serve-gziped-an-otf-font-using-htaccessphp-ini-no-mod-gzip-or-deflate

[Infosakh]

Да нафига мне твой хеад. Ты наведи на h3  и покажи че букашка кажет - ну там стили сбоку должны быть....А куча линков и скриптов в хеаде я уже сказал как называется (кто не слышал - слово на букву "г")

 

[danik.html]

Ну по идее щас у h3 шрифт "FluxBold", хотя лучше еще посмотреть на вкладке Скомпилированный стиль - что там? Но вот сам текст засунут в span, и какой ему задан шрифт - ты смотрел? Еще смущает откуда то взявшийся visibility: visible - У тебя скрипт какойто скрывает/показывает заголовки, или что? И че за <font></font> повторяющийся бесконечно? снова "г" ?

И глянь на вкладке Сеть - запрос к ширфту идет? И если идет - загружается ли он?

[Infosakh]

хотя лучше еще посмотреть на вкладке Скомпилированный стиль - что там?

там FluxBold, этот шрифт я и цепляю через фон-фэйс

Но вот сам текст засунут в span, и какой ему задан шрифт - ты смотрел?

сделал в CSS так:
h3 span{
   font-family: 'FluxBold' !important;
} все равно не показывает 

Еще смущает откуда то взявшийся visibility: visible - У тебя скрипт какойто скрывает/показывает заголовки, или что?

если я правильно понял, это фишка шаблона, можно включить или выключить Enable FontSpans два цвета в заголовках (h3)

И че за <font></font> повторяющийся бесконечно? снова "г"

а где там это повторение? 

И глянь на вкладке Сеть - запрос к ширфту идет? И если идет - загружается ли он?

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

[Infosakh]

ааааааа, решил проблему! 

[Infosakh]

ёперный театр, удалось все таки запустить этот фонт-фэйс, но показывает он только в лисе, в IE, в опере не хотит 

[danik.html]

И в чем был косяк? Проверь пути к файлам. Не понял, в ie показывает или нет?

[Infosakh]

косяк был именно в путях, я нажал на сеть и поглядел что там грузит, и вот как раз этот шрифт писал что еррор, не может загрузить. Пытался грузить не с папки fonts, которую я создал в каталоге шаблона сайта, а пытался грузить с папки CSS каталога шаблона. Хотя я прописал в CSS файлике путь ../fonts/название шрифта
Вообщем не долго думая закинул шрифты в папку CSS и они начали отображаться в стиле H3. Но в опере не показываются  В IE, в Лисе все ок

[danik.html]

А случайно в опере не стоит режим "Турбо"?

[Infosakh]

нее, у мну безлимит и нормальная скорость, турбо не пользуюсь 

[Infosakh]

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

[danik.html]

Обнаружил пару проблем с font-face в опере (10.62)...
Первое - если в src сначала указан не-svg шрифт - опера не отображает. шрифт. Правится легко - ставим svg на первое место.
Второе - в некоторых случаях если font-family указан как перечисление, например 'MyNiceFont', 'Tahoma', sans-serif, то опера не отображает нужный шрифт. Это происходит не во всех случаях, однако приходится ограничиться указанием только одного шрифта, без альтернативных...
Надесюь в новых версиях эти баги устранят.

Ах да, как минимум первый баг обнаруживается только если открывать страничку с сервера. Если открыть как файл (file://) то бага нет...

[rewuxiin]

подобную фичу применил на форуме. оказалось всё намного проще. нужно лишь ttf. - для всех браузеров и oet. для эксплоера.

кстати сайт-конвертор указанный в шапке почему то удаляет русские шрифты.

единственный браузер который отказался их читать это опера сборки AC

[rewuxiin]

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

[Infosakh]

может кто подскажет какие прикольные есть шрифты, в стиле ну например фэнтази, графити  З.Ы, Желательно чтобы и кирилица была и латиница

[IgorArhangel]

а как добавить сразу 4 шрифта?

[lista]

что-то полезное для любой дизайнер Interent вы можете найти на этом сайте free font download

[dartl]

Так... Установил всё, как сказано, уникальный шрифт игры Warcraft, специально поменял цвет у тэга p  и написал туда, что бы поменять шрифт, вот что получилось:
@font-face {
    font-family: 'FritzQuadrataCyrillicRegular';
    src: url('frizqt-webfont.eot');
    src: url('frizqt-webfont.eot?#iefix') format('embedded-opentype'),
         url('frizqt-webfont.woff') format('woff'),
         url('frizqt-webfont.ttf') format('truetype'),
         url('frizqt-webfont.svg#FritzQuadrataCyrillicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
p { font-family: 'FritzQuadrataCyrillicRegular', sans-serif;
color:#f57433;
margin: 0 0 2em;}

Сайт вот и там же можно посмотреть результат применения шрифта:http://warcraft.afoog.ru/
Может я где-то неправильно что-то сделал? Или дело в шрифте, который я выбрал, очень надеюсь на помощь, хотелось бы установить этот шрифт на сайт, зарание всем кто поможет спасибо

[pronext]

Доброго всем времени суток!
Пытаюсь внедрить шрифт осетинского языка на сайт. Все никак не получается. Помогите пожалуйста. Я в этом деле чайник, вот код состряпал. Подправьте пожалуйста и куда его воткнуть то? в template.css шаблона?

@font-face
{
    font-family: 'ArialNarrow';
    src: url('http://xn--h1adgafdzif.su/templates/rhuk_milkyway/font/arialnbi-webfont.eot');
    src: url('http://xn--h1adgafdzif.su/templates/rhuk_milkyway/font/arialnbi-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://xn--h1adgafdzif.su/templates/rhuk_milkyway/font/arialnbi-webfont.woff') format('woff'),
         url('http://xn--h1adgafdzif.su/templates/rhuk_milkyway/font/arialnbi-webfont.ttf') format('truetype'),
         url('http://xn--h1adgafdzif.su/templates/rhuk_milkyway/font/arialnbi-webfont.svg#ArialNarrow') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face
{
    font-family: 'ArialNarrow';
    src: url('http://xn--h1adgafdzif.su/templates/rhuk_milkyway/font/sarialnb-webfont.eot');
    src: url('http://xn--h1adgafdzif.su/templates/rhuk_milkyway/font/arialnb-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://xn--h1adgafdzif.su/templates/rhuk_milkyway/font/arialnb-webfont.woff') format('woff'),
         url('http://xn--h1adgafdzif.su/templates/rhuk_milkyway/font/arialnb-webfont.ttf') format('truetype'),
         url('http://xn--h1adgafdzif.su/templates/rhuk_milkyway/font/arialnb-webfont.svg#ArialNarrow') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face
{
    font-family: 'ArialNarrow';
    src: url('http://xn--h1adgafdzif.su/templates/rhuk_milkyway/font/arialn-webfont.eot');
    src: url('http://xn--h1adgafdzif.su/templates/rhuk_milkyway/font/arialn-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://xn--h1adgafdzif.su/templates/rhuk_milkyway/font/arialn-webfont.woff') format('woff'),
         url('http://xn--h1adgafdzif.su/templates/rhuk_milkyway/font/arialn-webfont.ttf') format('truetype'),
         url('http://xn--h1adgafdzif.su/templates/rhuk_milkyway/font/arialn-webfont.svg#ArialNarrow') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face
{
    font-family: 'ArialNarrow';
    src: url('http://xn--h1adgafdzif.su/templates/rhuk_milkyway/font/arialni-webfont.eot');
    src: url('http://xn--h1adgafdzif.su/templates/rhuk_milkyway/font/arialni-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://xn--h1adgafdzif.su/templates/rhuk_milkyway/font/arialni-webfont.woff') format('woff'),
         url('http://xn--h1adgafdzif.su/templates/rhuk_milkyway/font/arialni-webfont.ttf') format('truetype'),
         url('http://xn--h1adgafdzif.su/templates/rhuk_milkyway/font/arialni-webfont.svg#ArialNarrow') format('svg');
    font-weight: normal;
    font-style: normal;
}

[danik.html]

подобную фичу применил на форуме. оказалось всё намного проще. нужно лишь ttf. - для всех браузеров и oet. для эксплоера.

кстати сайт-конвертор указанный в шапке почему то удаляет русские шрифты.

единственный браузер который отказался их читать это опера сборки AC

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

[Equilibrium07]

 


 

[renat56]

Всем привет! Вот неплохой (ссылка ниже) ЛикБез по установке стороннего шрифта в шаблон. В данном случае я все проделал с шаблоном Yoo Nano. И через несколько часов освоения всего этого, произошло чудо,  все получилось!

P.S. Это мой первый сайт на Joomla, опыта всего неделю:)

http://www.yootheme.com/themes/documentation/customizing/add-new-css-js-or-fonts

[Efanych]

А где шрифты нужные скачивать? Есть надёжные ресурсы? Ну, чтоб не получилось, что он платный, а я бесплатно скачал...

[danik.html]

Добавил в шапку темы информацию по Google webfonts.

А где шрифты нужные скачивать? Есть надёжные ресурсы? Ну, чтоб не получилось, что он платный, а я бесплатно скачал...

Например, теже самые описанные в шапке сервисы: fontsquirrel и Google webfonts.

[myrka]

А у меня в www.fontsquirrel.com при добавлении шршифта выдаёт ошибку((
The font "Micra Bold" is corrupt and cannot be converted
Почему шрифт не хочет генерироватся((

[demane]

Та же хрень. Обидно.

[demane]

Всем привет! Вот неплохой (ссылка ниже) ЛикБез по установке стороннего шрифта в шаблон. В данном случае я все проделал с шаблоном Yoo Nano. И через несколько часов освоения всего этого, произошло чудо,  все получилось!

P.S. Это мой первый сайт на Joomla, опыта всего неделю:)

http://www.yootheme.com/themes/documentation/customizing/add-new-css-js-or-fonts

Друг, если у тебя получилось расскажи народу по русски, а?

[danik.html]

А у меня в www.fontsquirrel.com при добавлении шршифта выдаёт ошибку((
The font "Micra Bold" is corrupt and cannot be converted
Почему шрифт не хочет генерироватся((

Не встречался с такой ошибкой. Встречался с другой - при попытке конвертации, например Calibri ( с недавнего времени ). В общем сейчас сделали проверку шрифтов на условия владельцев шрифтов.
Вот тема на stackoverflow.com где перечислены альтернативные онлайн-генераторы, а также способ удаления информации с шрифта так, чтоб fontsquirrel его не распознала.

[myrka]

Не встречался с такой ошибкой. Встречался с другой - при попытке конвертации, например Calibri ( с недавнего времени ). В общем сейчас сделали проверку шрифтов на условия владельцев шрифтов.
Вот тема на stackoverflow.com где перечислены альтернативные онлайн-генераторы, а также способ удаления информации с шрифта так, чтоб fontsquirrel его не распознала.

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

[danik.html]

Возможно из шрифта вырезаются кириллические символы. Это настраивается в опциях.