как подлючить свой шрифт

[klierik]

Приветствую.

Наткнулся на сайт: http://north.bensaunders.com/

согласно фаербагу у них уникальный шрифт.

вот только не могу понять как они это сделали? может кто подскажет...

[Vlad]

Согласно тому же фаербагу, если отключить font-family, то ничего не произойдет. Т.е. шрифт то указан, но реально не работает.

[Lincky]

Согласно тому же фаербагу, если отключить font-family, то ничего не произойдет. Т.е. шрифт то указан, но реально не работает.

Ошибочное мнение.

Шрифт отлично работает. При отключении сво-ва font-family видно изменение шрифта. Все дело в том, что файрбагом надо отключить это сво-во в 3-х файлах стилей, тогда мы и увидим изменение шрифта.

Приветствую.

Наткнулся на сайт: http://north.bensaunders.com/

согласно фаербагу у них уникальный шрифт.

вот только не могу понять как они это сделали? может кто подскажет...

Сделали они это элементарно. Через @font-face

[Great Rash]

Зашит в страницу при помощи base64.

@font-face {
font-family: "ff-meta-serif-web-pro-2";
src: url(data:font/otf;base64,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
IABDAGgAcgBpAHMAdABpAGEAbgAgAFMAYwBoAHcAYQByAHQAegAsACAASwByAGkAcwAgAFMAbwB3AGUAc
gBzAGIAeQAgAHAAdQBiAGwAaQBzAGgAZQBkACAAYgB5ACAARgBTAEkAIABGAG8AbgB0AFMAaABvAHAAIA
BJAG4AdABlAHIAbgBhAHQAaQBvAG4AYQBsACAARwBtAGIASAAAMjAwOSBFcmlrIFNwaWVrZXJtYW5uLCB
DaHJpc3RpYW4gU2Nod2FydHosIEtyaXMgU293ZXJzYnkgcHVibGlzaGVkIGJ5IEZTSSBGb250U2hvcCBJ
bnRlcm5hdGlvbmFsIEdtYkgAAE0AZQB0AGEAIABTAGUAcgBpAGYAIABPAGYAZgBjACAAUAByAG8AIABCA
G8AbABkACAASQB0AGEAbABpAGMAAE1ldGEgU2VyaWYgT2ZmYyBQcm8gQm9sZCBJdGFsaWMAAEIAbwBsAG
QASQB0AGEAbABpAGMAAEJvbGRJdGFsaWMAAEUAcgBpAGsAIABTAHAAaQBlAGsAZQByAG0AYQBuAG4ALAA
gAEMAaAByAGkAcwB0AGkAYQBuACAAUwBjAGgAdwBhAHIAdAB6ACwAIABLAHIAaQBzACAAUwBvAHcAZQBy
AHMAYgB5ADoAIABNAGUAdABhACAAUwBlAHIAaQBmACAATwBmAGYAYwAgAFAAcgBvACAAQgBvAGwAZAAgA
EkAdABhAGwAaQBjADoAIAAyADAAMAA5AABFcmlrIFNwaWVrZXJtYW5uLCBDaHJpc3RpYW4gU2Nod2FydH
osIEtyaXMgU293ZXJzYnk6IE1ldGEgU2VyaWYgT2ZmYyBQcm8gQm9sZCBJdGFsaWM6IDIwMDkAAE0AZQB
0AGEAIABTAGUAcgBpAGYAIABPAGYAZgBjACAAUAByAG8AIABCAG8AbABkACAASQB0AGEAbABpAGMAAE1l
dGEgU2VyaWYgT2ZmYyBQcm8gQm9sZCBJdGFsaWMAAFYAZQByAHMAaQBvAG4AIAA3AC4ANQAwADQAOwAgA
DIAMAAwADkAOwAgAEIAdQBpAGwAZAAgADEAMAAwADYAAFZlcnNpb24gNy41MDQ7IDIwMDk7IEJ1aWxkID
EwMDYAAE0AZQB0AGEAUwBlAHIAaQBmAE8AZgBmAGMAUAByAG8AQgBvAGwAZABJAHQAYQBsAGkAYwAATWV
0YVNlcmlmT2ZmY1Byb0JvbGRJdGFsaWMAAAACAAD/9QAA/80ASQAAAAAAAAAAAAAAAAAAAAAAAAAAAAYAAAABAAIAKAArACwAAAAAAAMACAACAGAAA///AAIAAAABAAAAAMNawgIAAAAAwyd2LwAAAADHPAzu);
font-style: italic;
font-weight: 700;
}

т.е. вы его по сути выкачиваете...

[Lincky]

ИЕ по сути не выкачивает то.

[Great Rash]

Ну на то он и ИЕ...

[klierik]

как по мне так слева и справа шрифты одинаковые. или я чего-то не понимаю?

зы: а есть ли кроссбраузерное решение подключения своего шрифта на страницу?

[Justnewone]

как по мне так слева и справа шрифты одинаковые. или я чего-то не понимаю?

У фаерага есть замечательная закладка - скомпилированный стиль (то естьб примененный, результирующий)

В ней говорится вот что:

font-family "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2",serif

[klierik]

У фаерага есть замечательная закладка - скомпилированный стиль (то естьб примененный, результирующий)

В ней говорится вот что:

font-family "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2",serif

ну все правильно. к фаерфоксу и к ИЕ6 получается приатачивается свой шрифт.

немного полазил по странице, стало понятно что грузится шрифт из: http://use.typekit.com

собственно тут использовали по всей видимости АПИ от Гугла.

Всё бы хорошо, только, насколько я знаю, через АПИ нельзя подгружать шрифты со своего сервера (по крайней мере я не смог этого найти в мануале)

[psywalker]

Лёх, а попробуй вот этот вариант http://psywalker.ru/Forum/Font-face/main.html

[klierik]

в общем получилось подклюить шрифты под все последние браузеры + ИЕ6+

да бы не разлогольствовать, просто выкладываю линк

зы: в случае использования сервиса http://www.fontsquirrel.com/fontface/generator - учтите, что следует выбрать режим Експерта, и выключить режим "Subsetting" (иначе вырежит все кирилические символы)

[psywalker]

Лёх, а можешь описать по шагам, как ты это сделал.

[klierik]

1. берм шрифты

2. загружаем на сервер (выставив соответствующие параметры)

3. конвертируем

4. скачиваем

5. кладем в отдельную папочку

6. со скаченного CSS файла копируем в проект объявления шрифтов

6. меняем ути на соответствующие

7. в итоге получаем нечто:

	@font-face {
	   font-family: Gals;
	   src:  url("../fonts/gals-webfont.eot");
	   src:  local('O'),
			 url('../fonts/gals-webfont.otf') format('opentype'),
			 url('../fonts/gals-webfont.woff') format('woff'),
			 url('../fonts/gals-webfont.ttf') format('truetype'),
			 url('../fonts/gals-webfont.svg#webfontEO7F58F8') format('svg');
	   font-weight: normal;
	   font-style: normal;
	   }

8. шрифты будут показыватся даже на iPhone (не тестировал, но так утверждают в статье)

9. собственно всё.

[psywalker]

Понял, спасиб, а смотри.

1. берм шрифты

Можно любые скачивать из инета?

2. загружаем на сервер (выставив соответствующие параметры)

А чё за параметры?

5. кладем в отдельную папочку

Т.е. он мне выдаёт уже все форматы для всех браузеров в одном архиве?

6. со скаченного CSS файла копируем в проект объявления шрифтов

А покажи пример плиз.

[klierik]

1.Можно любые скачивать из инета?

2.А чё за параметры?

3.Т.е. он мне выдаёт уже все форматы для всех браузеров в одном архиве?

4.А покажи пример плиз.

1. Мне предоставили приобретённые шрифты в формате *.otf. Их и загружал на сервер.

2. как я уже говорил выше:

зы: в случае использования сервиса http://www.fontsquirrel.com/fontface/generator - учтите, что следует выбрать режим Експерта, и выключить режим "Subsetting" (иначе вырежит все кирилические символы)

3. да, именно так сервис и делает.

4. пример показать не могу, так как проект в разработке.

[psywalker]

4. пример показать не могу, так как проект в разработке.

Не, в смысле КАК именно копировать

[klierik]

сорри, а "копировать" что? о_О

в архиве ты скачиваешь набор шрифтов + *.css-файл

в аттаче архив с шифтом "Trajan Regular"

вот тебе пример

webfontkit_20101013_111206.zip

[psywalker]

Ага, спасибо Лёх, пойду разбираться