[Помогите] @font-face?

v@dim · 22 ноя 2012

Доброй ночи! Не как не могу вдуплить в @font-face. Как ни странно во всех браузерах все нормально подгружает а вот в файрфоксе 17 и хроме не работает????!!! Может кто подсказать что не так?
Делаю так:
Код:
@font-face {
	font-family: 'font';
	src: url('catalog/view/theme/default/fonts/font.eot');
	src: local('☺'),
		url('catalog/view/theme/default/fonts/font.woff') format('woff'),
		url('catalog/view/theme/default/fonts/font.ttf') format('truetype'),
		url('catalog/view/theme/default/fonts/font.svg#font') format('svg');
	font-weight: normal;
	font-style: serif;
}
 
 
h1 {
	font-family: font, serif;
	font-weight: normal;
}
Еще и задержка при загрузке страницы!
--- добавлено: 21 ноя 2012 в 23:06 ---
Все сам решил. С путями проблема
Не знаю почему?!
В общем нужно было просто пути со слэша начинать. Спасибо.

freemh · 22 ноя 2012

Try this font compiler : http://www.fontsquirrel.com/fontface/generator ?

v@dim · 22 ноя 2012

Не очень понимаю смысла этих генераторов? Если достаточно сконвертировать в нужный формат шрифты и прописать несколько строк кода.
--- добавлено: 22 ноя 2012 в 00:07 ---
Кстати моя проблема была в том числе из-за кода выданного генератором. От чего зависят пути вообще? Где то со слэшем, где-то без? От серверных настроек?

freemh · 22 ноя 2012

The role of these compilers it's to cleanly convert your font in the other extensions (EOT, TTF, OTF, CFF, AFM, LWFN, FFIL, FON, PFM, PFB, WOFF, SVG, STD, PRO, XSF) to works on all browsers.
Note : sometimes the font it's not adapted to all navigators.
--- добавлено: 22 ноя 2012 в 00:24 ---
Try to use this snippet:
Код:
@font-face {
  font-family: 'your_font';
  src: url('your_font.eot');
  src: url('your_font.eot?#iefix') format('embedded-opentype'),
  url('your_font.woff') format('woff'),
  url('your_font.ttf') format('truetype'),
  url('your_font.svg#your_font_sansregular') format('svg');
  font-weight: normal;
  font-style: normal; }
If it does not work, try to put complet url:
Код:
@font-face {
  font-family: 'http://yourwebsite.com/folderfont/your_font';
  src: url('http://yourwebsite.com/folderfont/your_font.eot');
  src: url('http://yourwebsite.com/folderfont/your_font.eot?#iefix') format('embedded-opentype'),
  url('http://yourwebsite.com/folderfont/your_font.woff') format('woff'),
  url('http://yourwebsite.com/folderfont/your_font.ttf') format('truetype'),
  url('http://yourwebsite.com/folderfont/your_font.svg#your_font_sansregular') format('svg');
  font-weight: normal;
  font-style: normal; }

brigadir · 29 ноя 2012

в <head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300&subset=latin,cyrillic' rel='stylesheet' type='text/css' />
в CSS
font-family: 'Open Sans Condensed','Arial Narrow',serif;

pakistanec · 24 дек 2012

http://www.fontsquirrel.com/fontface/generator авто генератор для всех браузеров.

IvanCo · 25 дек 2012

vadik21 сказал(а): ↑

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

Как и всех подобных инструментов - в автоматизации рутинных действий для ускорения проектирования и устранения риска "глазной" и "ручной" ошибки человека (при наборе перепутаны буквы, например). Загрузил шрифты, нажал на кнопку - получил файлы во всех форматах, стили и, в качестве бонуса - информативный пример с разными кеглями, цветами, градиентными заливками, сравнением метрик.

За путями надо следить, да. В стилях генератора fontsquirrel шрифты считаются лежащими скопом в одной папке со стилями (чего у порядочного верстака никогда не бывает - шрифты раскладываются в отдельную папку)

bawan · 12 янв 2013

Еще плюсом fontsquirrel является возможность засунуть все шрифт в один base64 css файл, что по идее должно увеличить скорость загрузки страниц.