Using Canvas Processing.js to build custom fonts.

When dealing with logos and intellectual property rights (copyrights). It becomes necessary that the font used is not a standard font. You can not for example type your company name in times roman and then get copyright protection for it as a logo. Instead you must build your own font then you can get copyright protection. For either or both the font and the logo.

processing-js allows you to build a font using svg. Then displays text using your custom font. It also allows you to have fonts on your site that do not exist in the computer browser. But there is a limitation – the text is rendered as graphics so it is not seen by search engines. None the less there are many uses for custom fonts not seen by search engines: when somebody logs in to a web 2.0 site their name is normally shown; Shopping cart items are based on a secession with the visitor …

Although the canvas tag renders as a graphic for downward compatibility alternative content (the same words in a normal font) are included on the page – it is up to the search engine if the alternative content is given the same weight as if a canvas tag was not used. It is not a given that it will or will not be – or that search engines will not make adjustments in the future.

Another benefit of using Canvas is the content can be animated to focus the attention of the visitor.

As side notes: True Type Fonts can be converted to SVG fonts using Batik TTF to SVG Convertor. Changing a font into vectors is the first step to changing them into a true 3d object for use in webgl or other 3d animation applications.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: