Непонятная ситуация со шрифтом

[Alfa2015]

Какая-то непонятная ситуация со шрифтом. 
В макете используется шрифт PF Square Sans Pro Medium. (скрин: http://savepic.su/4834376.png )

 

Но файл со шрифтом называется pfsquaresanspro-medium (скрин: http://savepic.su/4837448.png )

 

Вопрос: Почему разные названия?

Какое название писать? PF Square Sans Pro Medium или pfsquaresanspro-medium?

 

Почему спрашиваю: Я написала шрифт по названию файла

font-family: 'pfsquaresanspro-medium';

Но он не похож на шрифт, который в макете. (скрин: http://savepic.su/4831304.png )

Так тоже указывала шрифт:

font-family: PF Square Sans Pro Medium;

И так тоже:

font-family: PF Square Sans Pro;

Ничего не помогает.

 

Правило @font-face указала (в папку fonts сложила все шрифты: скрин: http://savepic.su/4794440.png )

@font-face {	font-family: 'pfsquaresanspro-medium';	src: url(fonts/pfsquaresanspro-medium.eot.eot);	src: url(fonts/pfsquaresanspro-medium.eot.eot#iefix) format('embedded-opentype'),		 url(fonts/pfsquaresanspro-medium.woff.woff) format('woff'),		 url(fonts/pfsquaresanspro-medium.ttf) format('truetype'),		 url(fonts/pfsquaresanspro-medium.svg) format('svg');	font-weight: normal;    font-style: normal;}

Что делаю не так?

[satantx]

font-family: 'pfsquaresanspro-medium';

Edited January 26, 2015 by satantx

[Alfa2015]

font-family: 'pfsquaresanspro-medium';

Шрифты различаются. 

[satantx]

А в папке все версии шрифтов? 

И почему fonts/pfsquaresanspro-medium.eot.eot

[Vlad02]

и .woff.woff

[Alfa2015]

А в папке все версии шрифтов? 

И почему fonts/pfsquaresanspro-medium.eot.eot

 

и .woff.woff

Я конвертировала шрифт в эти форматы -- и так их и скачала (конвертировала здесь: http://www.freefontconverter.com и  https://www.kirsle.net/wizards/ttf2eot.cgi )

 

Версии все, которые надо)))))

 

Я не могу понять, почему различаются?

Edited January 26, 2015 by Alfa2015

[Vlad02]

Я не могу понять, почему различаются?

 

Потому, что шрифт не подключился.

В лисе правой кнопкой "Исследовать элемент" вкладка "Шрифты", что там пишет?

Edited January 26, 2015 by Vlad02

[Alfa2015]

 

Я не могу понять, почему различаются?

 

Потому, что шрифт не подключился.

В лисе правой кнопкой "Исследовать элемент" вкладка "Шрифты", что там пишет?

 

Я не знаю, что такое лиса...))))

[Vlad02]

лиса

Firefox

[Alfa2015]

Firefox

Пишет вот что: http://savepic.su/4804691.png

Да, шрифт не подключился...А почему? 

[Vlad02]

Расширения файлов шрифтов исправили? Дублируется ведь .eot.eot .woff.woff

[Alfa2015]

Расширения файлов шрифтов исправили? Дублируется ведь .eot.eot .woff.woff

Наверное, их не надо переименовывать.

Так как, если я начинаю переименовывать (то есть, удалять .eot и .woff), то появляется такое предупреждение: http://savepic.su/4831316.png

И если я, все-таки, выполню изменения, то в Тип появляется слово Файл...скрин: http://savepic.su/4801620.png

Edited January 26, 2015 by Alfa2015

[Great Rash]

1) Зайдите на сайт webfont.ru и скачайте оттуда архив с любым шрифтом

2) Разархивируйте и посмотрите как там сделано

3) Сделайте так же

[Alfa2015]

1) Зайдите на сайт webfont.ru и скачайте оттуда архив с любым шрифтом 2) Разархивируйте и посмотрите как там сделано 3) Сделайте так же

У меня также сделано -- проверила. http://savepic.su/4794454.png

 

Прямо-таки, какая-то загадка. 

Edited January 26, 2015 by Alfa2015

[Vlad02]

В файле стилей (CSS) уберите дублирование расширений файлов шрифта.

У вас так

src: url(fonts/pfsquaresanspro-medium.eot.eot);

А надо

src: url(fonts/pfsquaresanspro-medium.eot);

Edited January 26, 2015 by Vlad02

[Alfa2015]

Дублирование убрала: http://savepic.su/4832367.png

Но что-то не помогает, как был с зачечками -- так и остался: http://savepic.su/4820079.png

[Vlad02]

А если здесь конвертировать

[Alfa2015]

А если здесь конвертировать

Нет, не помогает....

Разгадка где-то рядом....Все дело, на мой взгляд, в названии. 

Но, все-равно, вопрос: какое название шрифта считается правильным?

В Фотошопе шрифт написан так: http://savepic.su/4834376.png

А файл этого шрифта написан вот так: http://savepic.su/4837448.png

 

Вот код:

font-family:PF Square Sans Pro Medium;font-weight: normal;

И получилось: http://savepic.su/4788152.png

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

 

 

А если здесь конвертировать

А неее...Изменилось название файла. Но вот, а это что? http://savepic.su/4839355.png и http://savepic.su/4825019.png

Edited January 27, 2015 by Alfa2015

[Vlad02]

Изменилось название файла. Но вот, а это что?

Это  галку поставили напротив "Embed font data in CSS (base64 encode)".

Название шрифта не влияет. А шрифт кириллицу поддерживает?

[Alfa2015]

Это  галку поставили напротив "Embed font data in CSS (base64 encode)".

 

Если не поставить галку, то кнопка конвертации будет не активна (пробовала)

 

 

 

Название шрифта не влияет. А шрифт кириллицу поддерживает?

По поводу кириллицы -- не задавалась таким вопросом...А как это узнать?

Edited January 27, 2015 by Alfa2015

[Vlad02]

Если не поставить галку, то кнопка конвертации будет не активна (пробовала)

Галка нужна здесь "I'm uploading a font that is legal for web embedding. I checked with the author and/or EULA.", а здесь "Embed font data in CSS (base64 encode)" это опция.

 

По поводу кириллицы -- не задавалась таким вопросом...А как это узнать?

Поставить редактор шрифтов и посмотреть есть ли кириллица в шрифте.

Edited January 27, 2015 by Vlad02

[Alfa2015]

Поставить редактор шрифтов и посмотреть есть ли кириллица в шрифте.

Есть

Edited January 27, 2015 by Alfa2015

[Vlad02]

Напишите мне в скайп buyan02

Edited January 27, 2015 by Vlad02