Форум русской поддержки Joomla!® CMS
08.12.2016, 22:15:06 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Голосование
Вопрос: Используете ли вы сторонние шрифты в своих проектах?
Да, использую @font-face
Да, по старинке юзаю Cufón
Только узнал как это делается. Буду юзать
Нет, мне хватает стандартных шрифтов
Категорически нет, это извращение. За такое надо руки отрывать.

Страниц: [1] 2 3 4  Все   Вниз
  Добавить закладку  |  Печать  
Автор

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

 (Прочитано 73239 раз)
0 Пользователей и 1 Гость смотрят эту тему.
danik.html
Практически профи
*******

Репутация: +351/-4
Offline Offline

Пол: Мужской
Сообщений: 2723



« : 13.10.2010, 09:44:50 »

Описание как внедрить свой шрифт в шаблон 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% одинаковое и верное отображение шрифтов во всех браузерах.
Хотя в большинстве случаев все хорошо.
« Последнее редактирование: 20.05.2012, 07:42:33 от danik.html » Записан
Infosakh
Живу я здесь
******

Репутация: +67/-0
Offline Offline

Сообщений: 1257



« Ответ #1 : 13.10.2010, 10:06:50 »

сейчас буду снова пробовать  Smiley
Записан
Infosakh
Живу я здесь
******

Репутация: +67/-0
Offline Offline

Сообщений: 1257



« Ответ #2 : 13.10.2010, 11:10:19 »

вообщем делал все вроде правильно, прописал в 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 тоже ничего не изменилось  Smiley
Записан
danik.html
Практически профи
*******

Репутация: +351/-4
Offline Offline

Пол: Мужской
Сообщений: 2723



« Ответ #3 : 13.10.2010, 11:15:45 »

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

Репутация: +67/-0
Offline Offline

Сообщений: 1257



« Ответ #4 : 13.10.2010, 11:30:47 »

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

Записан
Infosakh
Живу я здесь
******

Репутация: +67/-0
Offline Offline

Сообщений: 1257



« Ответ #5 : 13.10.2010, 11:40:43 »

сейчас попробую другой шрифт подцепить, может этот шрифт глючный  Smiley
Записан
Infosakh
Живу я здесь
******

Репутация: +67/-0
Offline Offline

Сообщений: 1257



« Ответ #6 : 13.10.2010, 11:42:45 »

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

Репутация: +67/-0
Offline Offline

Сообщений: 1257



« Ответ #7 : 13.10.2010, 11:53:20 »

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

Репутация: +351/-4
Offline Offline

Пол: Мужской
Сообщений: 2723



« Ответ #8 : 13.10.2010, 12:49:56 »

Давай скрин букашки
Записан
Infosakh
Живу я здесь
******

Репутация: +67/-0
Offline Offline

Сообщений: 1257



« Ответ #9 : 14.10.2010, 06:55:13 »

вот, хэдер   Smiley
Записан
danik.html
Практически профи
*******

Репутация: +351/-4
Offline Offline

Пол: Мужской
Сообщений: 2723



« Ответ #10 : 14.10.2010, 08:01:49 »

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

Репутация: +67/-0
Offline Offline

Сообщений: 1257



« Ответ #11 : 14.10.2010, 13:17:25 »

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

Репутация: +67/-0
Offline Offline

Сообщений: 1257



« Ответ #12 : 14.10.2010, 13:18:23 »

З.Ы. Там нет фигни, всё по делу используется  Smiley
Записан
danik.html
Практически профи
*******

Репутация: +351/-4
Offline Offline

Пол: Мужской
Сообщений: 2723



« Ответ #13 : 20.10.2010, 05:10:47 »

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

Репутация: +67/-0
Offline Offline

Сообщений: 1257



« Ответ #14 : 20.10.2010, 15:55:24 »

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

Репутация: +351/-4
Offline Offline

Пол: Мужской
Сообщений: 2723



« Ответ #15 : 20.10.2010, 20:26:43 »

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

Репутация: +67/-0
Offline Offline

Сообщений: 1257



« Ответ #16 : 21.10.2010, 03:01:14 »

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

Репутация: +351/-4
Offline Offline

Пол: Мужской
Сообщений: 2723



« Ответ #17 : 21.10.2010, 07:34:30 »

Давай скрин букашки
Записан
Infosakh
Живу я здесь
******

Репутация: +67/-0
Offline Offline

Сообщений: 1257



« Ответ #18 : 21.10.2010, 15:53:41 »


так я же давал http://joomlaforum.ru/index.php/topic,133343.msg729319.html#msg729319
Записан
danik.html
Практически профи
*******

Репутация: +351/-4
Offline Offline

Пол: Мужской
Сообщений: 2723



« Ответ #19 : 21.10.2010, 20:39:20 »

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

Репутация: +4/-4
Offline Offline

Пол: Женский
Сообщений: 16

и когда же я научусь-то ((


« Ответ #20 : 21.10.2010, 20:41:50 »

а без @font-face можно поставить шрифты?
Записан
danik.html
Практически профи
*******

Репутация: +351/-4
Offline Offline

Пол: Мужской
Сообщений: 2723



« Ответ #21 : 21.10.2010, 20:44:46 »

а без @font-face можно поставить шрифты?
Да, есть костыли, позволяющие делать это без @font-face'а...
Записан
artdent
Захожу иногда
**

Репутация: +4/-4
Offline Offline

Пол: Женский
Сообщений: 16

и когда же я научусь-то ((


« Ответ #22 : 21.10.2010, 21:07:13 »

Да, есть костыли, позволяющие делать это без @font-face'а...
а можно ссылку хотя бы на один костыль
спасибо
Записан
doctorgrif
Завсегдатай
*****

Репутация: +82/-1
Offline Offline

Пол: Мужской
Сообщений: 759


Нудный доктор


« Ответ #23 : 21.10.2010, 21:08:06 »

а можно ссылку хотя бы на один костыль
спасибо
гуглить по sirf
Записан
danik.html
Практически профи
*******

Репутация: +351/-4
Offline Offline

Пол: Мужской
Сообщений: 2723



« Ответ #24 : 21.10.2010, 21:20:15 »

а можно ссылку хотя бы на один костыль
спасибо
А для чего это можно услышать?
Записан
doctorgrif
Завсегдатай
*****

Репутация: +82/-1
Offline Offline

Пол: Мужской
Сообщений: 759


Нудный доктор


« Ответ #25 : 21.10.2010, 21:25:14 »

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
Живу я здесь
******

Репутация: +67/-0
Offline Offline

Сообщений: 1257



« Ответ #26 : 22.10.2010, 04:16:11 »

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

Репутация: +351/-4
Offline Offline

Пол: Мужской
Сообщений: 2723



« Ответ #27 : 22.10.2010, 08:50:35 »

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

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

Репутация: +67/-0
Offline Offline

Сообщений: 1257



« Ответ #28 : 22.10.2010, 10:36:20 »

Цитировать
хотя лучше еще посмотреть на вкладке Скомпилированный стиль - что там?
там FluxBold, этот шрифт я и цепляю через фон-фэйс
Цитировать
Но вот сам текст засунут в span, и какой ему задан шрифт - ты смотрел?
сделал в CSS так:
h3 span{
   font-family: 'FluxBold' !important;
} все равно не показывает  Smiley
Цитировать
Еще смущает откуда то взявшийся visibility: visible - У тебя скрипт какойто скрывает/показывает заголовки, или что?
если я правильно понял, это фишка шаблона, можно включить или выключить Enable FontSpans два цвета в заголовках (h3)
Цитировать
И че за <font></font> повторяющийся бесконечно? снова "г"
а где там это повторение?  Shocked
Цитировать
И глянь на вкладке Сеть - запрос к ширфту идет? И если идет - загружается ли он?
посмотрел, я его в списке не вижу, но что самое интересное, я вижу что он грузит другой шрифт, я два шрифта пытался подключить через фонт-фейс  Smiley

Записан
Infosakh
Живу я здесь
******

Репутация: +67/-0
Offline Offline

Сообщений: 1257



« Ответ #29 : 22.10.2010, 10:40:13 »

ааааааа, решил проблему!  Cheesy Grin
Записан
Страниц: [1] 2 3 4  Все   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet