/    Sign up×
Community /Pin to ProfileBookmark

How to create font tester ?

Copy linkTweet thisAlerts:
Oct 18.2011

Hi All

I’m not certain this is a javascript issue but I just can’t think how to do this so I’m open to any ideas.

I’m trying to create a font tester like those found on most type foundry sites where you can enter text in field and it will appear in an area in a font picked from a list.

An example of the sort of thing can be found here.

[url]http://processtypefoundry.com/fonts/klavika/try-it[/url]

Any ideas on how this might be achieved would be greatly appreciated.

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@omnicityOct 19.2011 — Given the unreliability of trying to display a random font on client machine, I would almost certainly use a server-side solution to create a GIF / JPEG / PNG image on the fly (or better still create them in a batch if the text will remain the same.)

There are lots of toolkits that you could use for this, choices of course start with knowing what platform your server will be.
Copy linkTweet thisAlerts:
@aj_nscOct 19.2011 — Given the unreliability of trying to display a random font on client machine, I would almost certainly use a server-side solution to create a GIF / JPEG / PNG image on the fly (or better still create them in a batch if the text will remain the same.)

There are lots of toolkits that you could use for this, choices of course start with knowing what platform your server will be.[/QUOTE]

The web has moved forward, people now use @font-face so embeddable (e.g. non-licensed) required fonts will show up on users browsers 100% of the time. Using a combination of an input/content-editable element and @font-face, you can do whatever you want.

Here's how to embed a font:

http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

Use Font Squirrel's @font-face generator to create the necessary .woff, .eot, and .svg files from your .otf or .ttf

http://www.fontsquirrel.com/fontface/generator
Copy linkTweet thisAlerts:
@rnd_meOct 19.2011 — i wrote this a long time ago, but it still seems to work.

http://danml.com/pub/fontform.html

feel free to ripoff any code you find helpful.
Copy linkTweet thisAlerts:
@omnicityOct 20.2011 — The web has moved forward, people now use @font-face so embeddable (e.g. non-licensed) required fonts will show up on users browsers 100% of the time.[/QUOTE]

Well, the OP didn't give us an awful lot of detail of what they were trying to do. @fontface is still not 100% reliable right now, there is still plenty of debate about the best bullet-proof syntax, but even if you get that right then loading a million fonts is not a good idea. I had assumed that the OP would have already considered that, so thought I would provide an alternative that was _genuinely_ bullet-proof - anyone who has images turned off is unlikely to allow @fontface!
Copy linkTweet thisAlerts:
@aj_nscOct 22.2011 — Nothing is 100% reliable if you have visitors that could be using Lynx as a browser.

@font-face, if you use the bullet proof syntax posted by font spring (modified from Paul Irish's bullet proof syntax), is as close to 100% reliable as anything can be. @font-face has been supported in IE since 5.5. It's supported in all modern browsers and their legacy versions (FF>3.5, Chrome 5, Opera 10, Safari 3.2 as well as Mobile Safari since the beginning).

All you need to make sure that all these browsers actually support your fonts is all the proper file types - .ttf/.otf, .woff, .svg, and .eot - generated from a ttf/otf by font squirrel.

It's hands down the better of the two choices between generating server side images (using something like ImageMagick or PHPs GD library) or using simple CSS that will be supported on >98% of your visitor's machines.
Copy linkTweet thisAlerts:
@rnd_meOct 23.2011 — for lots of free fonts like aj mentions, check out http://www.google.com/webfonts

edit: wow, i felt so ad-bottish leaving the above reply just had to say something else...
×

Success!

Help @ttmt spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...