Голосование

Используете ли вы сторонние шрифты в своих проектах?

Да, использую @font-face
Да, по старинке юзаю Cufón
Только узнал как это делается. Буду юзать
Нет, мне хватает стандартных шрифтов
Категорически нет, это извращение. За такое надо руки отрывать.
0 Пользователей и 1 Гость просматривают эту тему.
  • 98 Ответов
  • 85834 Просмотров
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
Описание как внедрить свой шрифт в шаблон Joomla
Работает в:
  • Chrome 0.3+
  • Firefox 3.5+
  • Internet Explorer 4+
  • Opera 10+
  • Safari 3.1+

Итак, мы хотим использовать на своем сайте сторонний шрифт, который нам(или дизайнеру) приглянулся.
Допустим он называется disneypark.ttf(111КБ).
Этот шрифт мы можем легко импортировать в свою таблицу стилей, используя @font-face правило в CSS.
Создадим в шаблоне папку fonts и положим туда наш шрифт. Пропишем в основном css-файле нашего шаблона такой код:

Код: css
@font-face {
font-family: 'DisnayPark';
src:
local('DisnayPark'),
url('../fonts/disneypark.ttf') format('truetype');
}

Теперь мы можем использовать созданный шрифт:

Код: css
p{
font-family: 'DisnayPark';
}

Но радоваться рано. Не все браузеры скушают truetype шрифт(а некоторые даже такой записи не поймут).
Для кроссбраузерного добавления шрифтов имеется два прекрасных сервиса:

  • Google Webfonts
  • Fontsquirrel

Google Webfonts позволяет подключить любой доступный сервису шрифт путем добавления в документ ссылки на внешний файл css-стилей:
Код: html4strict
<link href='http://fonts.googleapis.com/css?family=Marck+Script&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
Далее, в 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, поэтому чтобы применить шрифт пишем чета типа
Код: css
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 »
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

Infosakh

  • Завсегдатай
  • 1257
  • 67 / 0
сейчас буду снова пробовать  ^-^
*

Infosakh

  • Завсегдатай
  • 1257
  • 67 / 0
вообщем делал все вроде правильно, прописал в 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

  • Живу я здесь
  • 2650
  • 353 / 4
Значит у тебя правила гдето переопределяются. смоти в FireBug . или выкладывай ссыль на сайт. Или пропиши
h3{
   font-family: 'SeasideResortNFRegular' !important;
}
А как в ff?
И еще, ты забыл путь eot поправить.
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

Infosakh

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

*

Infosakh

  • Завсегдатай
  • 1257
  • 67 / 0
сейчас попробую другой шрифт подцепить, может этот шрифт глючный  ^-^
*

Infosakh

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

Infosakh

  • Завсегдатай
  • 1257
  • 67 / 0
эх, не робит, думал может с куфоном конфликтует, выключил куфон не кажет всё равно, другой шрифт сделал, не помогло, ээх, заколдованный какой то стиль h3  ^-^
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
Давай скрин букашки
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

Infosakh

  • Завсегдатай
  • 1257
  • 67 / 0
вот, хэдер   ^-^
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
Да..картина конешно ужасная...
хедер ни о чем не говорит(разве только что там тонны всякой лишней фигни). Ты сделай скрин h3. И непонятно ты куфон или font-face используешь
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

Infosakh

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

Infosakh

  • Завсегдатай
  • 1257
  • 67 / 0
З.Ы. Там нет фигни, всё по делу используется  ^-^
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
Infosakh, проблему решил? Если да, можешь дать ссыльку поглядеть?
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

Infosakh

  • Завсегдатай
  • 1257
  • 67 / 0
к сожалению нет, пока оставил как есть, h1 выводится обычным шрифтом, я вот думаю, может это конфликтует мутулс с квери?  ^-^
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
гмм.. так у тя всетаки куфон? я думал ты font-face ставишь...тогда причем тут js нипонятна...
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

Infosakh

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

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
Да нафига мне твой хеад. Ты наведи на h3  и покажи че букашка кажет - ну там стили сбоку должны быть....А куча линков и скриптов в хеаде я уже сказал как называется (кто не слышал - слово на букву "г")
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

artdent

  • Осваиваюсь на форуме
  • 15
  • 4 / 4
  • и когда же я научусь-то ((
а без @font-face можно поставить шрифты?
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
а без @font-face можно поставить шрифты?
Да, есть костыли, позволяющие делать это без @font-face'а...
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

artdent

  • Осваиваюсь на форуме
  • 15
  • 4 / 4
  • и когда же я научусь-то ((
Да, есть костыли, позволяющие делать это без @font-face'а...
а можно ссылку хотя бы на один костыль
спасибо
*

doctorgrif

  • Давно я тут
  • 745
  • 82 / 1
  • Нудный доктор
а можно ссылку хотя бы на один костыль
спасибо
гуглить по sirf
Омск-Екатеринбург-Челябинск...Feldzug gen Westen | Кафедра | GrayBox | Joostina 1.2.1 | Joostina Extensions | In Vino Veritas [в работе]
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
а можно ссылку хотя бы на один костыль
спасибо
А для чего это можно услышать?
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

doctorgrif

  • Давно я тут
  • 745
  • 82 / 1
  • Нудный доктор
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
Омск-Екатеринбург-Челябинск...Feldzug gen Westen | Кафедра | GrayBox | Joostina 1.2.1 | Joostina Extensions | In Vino Veritas [в работе]
*

Infosakh

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

danik.html

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

И глянь на вкладке Сеть - запрос к ширфту идет? И если идет - загружается ли он?
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

Infosakh

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

*

Infosakh

  • Завсегдатай
  • 1257
  • 67 / 0
ааааааа, решил проблему!  :D ;D
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Смена шрифтов в шаблоне Joomla 2.5

Автор GulliWeR

Ответов: 6
Просмотров: 8943
Последний ответ 29.09.2015, 13:29:19
от jetjetjet
Artisteer3 (использование сторонних шрифтов)

Автор Ahmedhanjik

Ответов: 7
Просмотров: 2735
Последний ответ 08.11.2013, 11:22:14
от Session152
Решение проблем в шаблоне ZT Dory

Автор JASON X

Ответов: 27
Просмотров: 6471
Последний ответ 03.08.2013, 12:28:55
от maksimkazakov
Сайт Продажи каркасных домов

Автор webster47rus

Ответов: 2
Просмотров: 1556
Последний ответ 18.02.2013, 10:41:10
от Efanych
Как востановить сайт на localhost?

Автор Amzel

Ответов: 4
Просмотров: 1505
Последний ответ 27.12.2012, 16:26:10
от Amzel