Как настроить платный шрифт для сайта

Светлана · January 29, 2014

Купила шрифт для сайта. Выслали один файл. С ним на моем компе работает, а на сайте - нет. Запросила адаптацию у продавца. Выслали 2 папки. Что с ними делать, к какому файлу указывать путь, что скачивать в файловый менеджер на хостер ума не приложу. Мучаюсь с установкой теперь. Как установить и привязать шрифт к сайту?

Edited January 29, 2014 by Светлана

Светлана · January 29, 2014

Пока что нашла информацию о плагине WEBFONT в блокноте NOTEPAD++. Установила. Нов правом окне среди webшрифтов нового шрифта нет. Значит его надо как-то закачать, чтобы использовать. Может сама соображу, пока жду ответ.

Edited January 29, 2014 by Светлана

npofopr · January 30, 2014

Подключать так http://htmlbook.ru/blog/svoi-shrift-na-stranitse

Наверно у вас в папках должны быть все "виды" шрифтов, что должно подключаться.

Светлана · February 1, 2014

Наиболее полный и безнадежный ответ я получила здесь :

http://www.xiper.net/collect/html-and-css-tricks/typographics/any-font.html

Пойду напьюсь с горя...потому что продавец не высылает инструкции по установке и правильному написанию кода для этого шрифта, мотивируя туманно " НИ У КОГО ПРОБЛЕМ НЕ БЫЛО"...

А у меня сегодня он может показаться, а завтра - нет. Это от настроения браузера зависит.

Неужели до сих пор никто ничего со шрифтами не придумал? Может другие языки как-то использовать?

js5 · February 1, 2014

Наиболее полный и безнадежный ответ я получила здесь :

Статье четыре года.

Неужели до сих пор никто ничего со шрифтами не придумал?

В подключении нет ничего сложного.

y6uBaToP · February 1, 2014

По вашей же ссылке:

Решение 5 — @font-face

@font-face — это такое CSS правило, которое позволяет импортировать внешний файл шрифтов в документ. Это значит, что если у пользователя не установлен нужный шрифт, он подгрузится с сервера без установки в операционную систему. Тебе всего лишь нужно добавить пару правил в CSS. То чего и ждали многие годы! Ура!

<style>   @font-face {    font-family: Pompadur; /* Имя шрифта */    src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */   }   P {    font-family: Pompadur;   }  </style>

iKNG · February 2, 2014

Еще посмотрите про Font Squirrel

Animkim · February 2, 2014

Font Squirrel кстати у меня что-то не заработал. Пишет что шрифт битый, скачал с разных сайтов уже раз 20, или он не конвертирует шрифты пиратские?

js5 · February 2, 2014

не конвертирует шрифты пиратские?

Некоторые коммерческие шрифты он не глотает. Но есть обходные пути. Какой шрифт?

Animkim · February 2, 2014

helvetica_bold, но мне интереснее что за обходные пути, сколько шрифтов он не глотает 1 из 10? или может там 50 на 50.

Светлана · February 2, 2014

<!DOCTYPE html>

<html>

<head>

<title> Название сайта</title>

<style>

@font-face{

font-family: "ALS Anastasia"; /* Гарнитура шрифта */

src: url(als_anastasia.ttf);

src: url(als_anastasia.eot) format ('embedded-opentype'),

url(als_anastasia.woff) format('woff'),

url(als_anastasia.ttf) format('truetype'),

url(als_anastasia.svg) format('svg');

}

h1 {

font-family: "ALS Anastasia";

}

h2 {

font-family: "ALS Anastasia";

}

</style>

<title>Название сайта</title>

</head>

<body>

<h1> Название сайта </h1>

<h2>Название сайта</h2>

</div>

</body>

</html>

На моем компе работает, а с других нет. Шрифта не видно. Кодировка UTF8.Что я делаю не так?

P.S. Шрифт я изменила во избежание проблем с продавцом.

Я учусь и думаю, что какие-то файлы не дозагрузила. Какие? ttf, eot,woff,svg - есть.

Но кроме них есть еще другие мне не понятные и в разных папках.

Скорее всего сделаю из шрифта картинку и успокоюсь.

Напишите, кто покупал и устанавливал шрифты на сайт.

Edited February 2, 2014 by Светлана

js5 · February 2, 2014

Заплатите фрилансеру, либо попросите чтобы вам сделали бесплатно.

Светлана · February 2, 2014

Мне неинтересно тупо платить за первый трудный для меня код. Я хочу понять что и как. А кто платит - никогда не станет программистом(денег не хватит).

XAHTEP26 · February 2, 2014

<!DOCTYPE html>

<html>

<head>

<title> Название сайта</title>

<style>

@font-face {

font-family: 'ALS Anastasia'; // На всякий случай проверьте здесь название название шрифта.

src: url('als_anastasia.eot'); // А в этой и последующих строках - название файла со шрифтом.

src: url('als_anastasia.eot?#iefix') format('embedded-opentype'),

url('als_anastasia.woff') format('woff'),

url('als_anastasia.ttf') format('truetype'),

url('als_anastasia.svg') format('svg');

font-weight: normal;

font-style: normal;

}

h1 {

font-family: "ALS Anastasia";

}

h2 {

font-family: "ALS Anastasia";

}

</style>

<title>Название сайта</title>

</head>

<body>

<h1> Название сайта </h1>

<h2>Название сайта</h2>

</div>

</body>

</html>

Также проверьте чтобы файлы шрифта находились в той же папке что и данная страница. И если даже это не поможет то обновите браузер на котором эти шрифты не отображаются. А если версия браузера самая новая... Тогда я даже незнаю...

Ну либо допишите еще:

h1, h2 {font-weight: normal;}

Хотя это врядли.

iKNG · February 3, 2014

Мне неинтересно тупо платить за первый трудный для меня код. Я хочу понять что и как. А кто платит - никогда не станет программистом(денег не хватит).

Ну о программировании речь и не идет. Смысл верстальщику становится программистом?

Светлана · February 3, 2014

Это самостоятельные технологии, которые могут применяться независимо друг от друга, но могут быть использованы и вместе в рамках одного решения. Все зависит от обстоятельств.

Светлана · February 6, 2014

Продавец прислал исправленный им код:

<!DOCTYPE html>

<html>

<head>

<title>Название сайта</title>

@font-face {

font-family: 'ALS Anastasia';

src: url('als_anastasia.eot');

src: url('als_anastasia.eot?#iefix') format('embedded-opentype'),

url('als_anastasia.woff') format('woff'),

url('als_anastasia.ttf') format('truetype'),

url('als_anastasia.svg#ALS Anastasia') format('svg');

}

h1 {

font-family: 'ALS Anastasia';

}

h2 {

font-family: 'ALS Anastasia';

}

</style>

<title>Название сайта</title>

</head>

<body>

<h1> Название сайта</h1>

<h2>Название сайта</h2>

</div>

</body>

</html>

Но на этом мои поиски "правды" не закончились.

На моем компе все есть. После загрузки на хостинг - нет.

Как будто браузер не видит шрифта.

XAHTEP26 · February 6, 2014

Я же написал вам правильный и даже избыточный код. И также написал что если он не работает, то проблема не в коде.

Светлана · February 6, 2014

К шрифту изначально прилагались 2 папки :

1 папка. _MACOSX .

В ней другая папка : ALS Anastasia . В этой папке

файлы и еще она папка : specimen_files(c файлами: ._easytabs(Jsript file 1 kb),.grid...(CSS- документ), +specimen_stylesheet(CSS документ). Также в папке ALS Anastasia : ._als_anastasia(файл шрифта TrueType),

_als_anastasia.svg, _als_anastasia-demo, _als_anastasia.woff,_als_anastasia.eot, generator_config(текст), specimen_files, _stylesheet(CSS документ).

2.папка :ALS Anastasia.

В ней снова папка с тем же содержимым как и в п.1 под назаванием "specimen_files". Есть файлы :

als_anastasia(файл шрифта TrueType), _als_anastasia.svg, _als_anastasia-demo, _als_anastasia.woff,_als_anastasia.eot, generator_config(текст), specimen_files, _stylesheet(CSS документ).

Когда я в эту 2 папку помещаю файл страницы сайта - шрифт видно у меня на компе. Но когда я эти файлы -" _als_anastasia.svg, _als_anastasia-demo, _als_anastasia.woff,_als_anastasia.eot, generator_config(текст), specimen_files, _stylesheet(CSS документ)" - загружаю в хостер с index.html в одном каталоге - шрифта нет с любого компа.

ХАНТЕР26, спасибо за помощь. Я поняла, что проблема не в коде, а в размещении шрифта в файловом менеджере. Браузер его не видит. Может я чего-то просто не знаю. Поэтому подробно и пишу. Не понимаю - что.

SelenIT · February 6, 2014

Возможно, не «браузер не видит», а сервер не отдает. У меня случалось на IIS. Нужно проверить в настройках сервера, чтобы для данных расширений файлов были зарегистрированы соответствующие типы (и при необходимости добавить недостающие).

Светлана · February 7, 2014

Хостинг Timeweb.ru. Написала запрос, где у них в панели настройки сервера шрифты. Они написали, чтобы я обратилась к документации СSS3.

Edited February 7, 2014 by Светлана

Светлана · February 7, 2014

Потом написали, что можно добавить необходимые типы с помощью директивы AddType в файле .htaccess, который расположен в корневой директории сайта.

npofopr · February 8, 2014

Ну все правильно. Можете у фреймворка посмотреть на htaccess

Raskru · February 8, 2014

Не важно где был куплен шрифт, и платный он был или бесплатный.

1. Вам нужно загрузить шрифт на сайт в соответствующую папку со шрифтами, если таковая имеется/если ее нет, создайте;

2. Откройте файл CSS, отвечающий за форматирование страницы/страниц HTML;

3. Импортируйте в данный файл необходимый вам шрифт при помощи правила @font-face;

Введенная в файл CSS запись должна иметь следующий вид:

@font-face {

font-family: "название шрифта";

src: url('ссылка на шрифт');

}

npofopr · February 9, 2014

Не важно где был куплен шрифт, и платный он был или бесплатный.

1. Вам нужно загрузить шрифт на сайт в соответствующую папку со шрифтами, если таковая имеется/если ее нет, создайте;
2. Откройте файл CSS, отвечающий за форматирование страницы/страниц HTML;
3. Импортируйте в данный файл необходимый вам шрифт при помощи правила @font-face;
Введенная в файл CSS запись должна иметь следующий вид:
@font-face {
font-family: "название шрифта";
src: url('ссылка на шрифт');
}

КО, вы хоть тему читали?

Светлана · February 9, 2014

В файл .htaccess (он в корневой директории сайта)необходимо добавить необходимые типы с помощью директивы AddType.

Теперь тупой вопрос новичка. "application", "font" - это папки, которых у меня нет. Значит их заменить

типа: als_anastasia eot и т.д.? Статьи я почитала. Не нашла примеров использования этого AddType.

Обычно пишут так, предполагая, что все знают как это делается.

AddType application/vnd.ms-fontobject eot
AddType application/x-font-ttf ttf ttc
AddType font/opentype otf
AddType application/x-font-woff woff

Sign In

Как настроить платный шрифт для сайта

Question

Link to comment

Share on other sites

33 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Important Information