Нестандартные шрифты на холсте Canvas.
 

Всем привет.
Недавно начал экспериментировать(в первые для себя) с различными манипуляциями над тегом Canvas и задался одним вопросом:
Можно ли как то отображать на холсте нестандартные шрифты?(при условии, что они заранее не установлены на компьютере естественно.)
(Не используя картинки!)
Можно ли как то задействовать в этом плане сервис Cufon?
Если да - то как именно?
(Имею ввиду как именно все это дело подключать? Это же не элементы dom дерева, насколько я понимаю?)
Возможно так же существует какая то альтернатива в этом плане?
P.S. Заранее благодарен за ответ..

Думаю можно. Он ведь создает js-объект на основе шрифта если правильно помню. Можно поковыряться в исходниках cufon и разобраться как можно писать текст имея такой шрифт.
Но возможно есть и проще решения. Кстати, а разве писать подключенными через @font-face шрифтами нельзя?

Пробовал - но лично у меня подключить не получилось.
(Хотя при подключении к другим блокам всё работает нормально. Если с винта подгружать.)
Вот пример:
В самой рамке находится canvas(к шрифту попытался подключить оформление через font-face.) а с лева от неё для примера тег span также c подключенными через font-face шрифтами.
http://webmaster.ayrveda.ru/fonts2/canvas.html
Правда сейчас на хостинг файл закинул и увидел что всё совсем по другому смотрится..
В каждом браузере по разному.
Но на холсте сами шрифты(именно в канвасе) пытаются отображаться только в хроме! И только только после неоднократной перезагрузки страницы.. (хотя с компа ничего не отображается на холсте. Только левый блок со спаном работает в норме.)
В мазилле + ie наоборот с компа Span в норме - но с хостинга не работает..
P.S. Возможно причины в путях - но перепробовал вроде все варианты.
Хотя тоже самое происходит и с демо версией шрифта.
http://webmaster.ayrveda.ru/fonts2/orbitronio-demo.html
(Значит с моей стороны ошибок по идее нет. Это хостинг наверное как то конфликтует с этими файлами..)
Ну да бог с ним. Здесь хотя бы в теории разобраться, что бы с винта всё работало в норме..

Хардкорный вариант: самому сгенерировать из шрифта картинку(вектор) + объект с описанием позиций, кернинга итд.=))

Но на самом деле готовые варианты точно есть, надо просто хорошенько погуглить "html canvas font".(например)

Спасибо за ссылку - но к сожалению мне не удалось разобраться что там вообще происходит? ))
(То есть какая цель этого кода?)
Закинул код в свой редактор - открыл в браузере и что дальше? ))
(ничего не понял.)
То есть я понимаю, что что то там(шрифты) попадает на холст после клика по кнопке - но детали мне не ясны.
P.S. C инглишем пока дружу не очень - поэтому гуглить могу только по русскоязычным ресурсам. (Чем сегодня собственно и занимался. Но к сожалению безрезультатно.)

Ты рисуешь на канвасе когда шрифт еще не подгружен. Поэтому нужный шрифт отобразится только если он закэширован браузером.
Кроме того, у тебя неправильные заголовки Content-Type. Хром по-видимому их игнорирует, а лис - нет.
Так что если исправить заголовки и дожидаться загрузки шрифта - все будет работать. Другое дело - как дождаться этой самой загрузки.
Как вариант - внедрять шрифты через data:uri. Разумеется это будет отличный вариант только для поддерживающих woff браузеров.

Спасибо!
P.S. А в чём ошибка Content-Type?
В том что он не заполнен?
(я так понимаю речь идёт о <meta content="" name="keywords">
<meta content="" name="description">)
Такая конструкция проходит валидацию насколько мне известно..
(Или я что то упустил?)

А JQ + JS такими возможностями не располагают?
(просто я далеко не спец. в этом направлении..)

Уфф, лучше просто показать:


Что такое JQ ?

JQuery.
P.S. Не совсем разобрался, что означают индикаторы на дополнении к браузеру(на сколько я понимаю.)
Тоесть как понять(по этому скрину) в чём ошибка content-type?