Drag and drop Web-font testing page (Including OT features)

The Font Testing Page is a tool primarily intended for type designers and independent foundries. It can also be used by art directors, graphic designers, teachers and students interested in seeing how a typeface works on the web.

There is a short video at:
https://vimeo.com/40296571

Operation is simple:
- First, you must accept the request from the browser.
- Then drag the font you want to try to the upper area of the Testing Page.

Below you will find 8 buttons: Headlines, Text, Lowercase Only, Adhesion Only, Caps, All Caps, Layout and Kern.
- Headlines: Displays examples: 72, 60, 48, 36 and 30 to 12.
- Text: Displays text blocks, from 20 to 10.
- Lowercase only: Displays examples of 72, 60, 48, 36, 30, 24, 18 and 16 to 10.
- Adhesion only: Shows examples using only 'adhesion' text. Intended for the early stages on a typeface design.
- Caps: Displays examples of words in Sentence Case at 60.
- All Caps: Displays examples of words in All-Caps at 60.
- Layout: Displays examples of Headline, Subhead and Body text.
- Kern: Displays examples of combinations of letters and miscellaneous signs.

Use it freely at:
http://www.impallari.com/testing/
- Requires Firefox 3.6+/Chrome 13+
- 100% safe: Your fonts are only stored in your own browser 'localStorage'.
- Nothings gets uploaded to the server.

By Pablo Impallari (impallari.com) and Pablo Cosgaya (omnibus-type.com).
Based on Fontdrag (fontdragr.com) and Dave Crossland's FontTest.

hrant's picture

{To Follow}

timotheus's picture

Nice utility, Pablo! Thanks for sharing.

riccard0's picture

Nice and blazing fast too! :-)
Next would be customisable text, I hope.
Curiously, if the file name starts with a number, it wouldn’t recognise it as a font.

brianskywalker's picture

I chatted with Pablo about having customizable text. Hopefully there will be a box or pop down menu to set the size.

Unfortunately, it's still only designed to account for one style. I think one that works with different styles, like bold and italic, on the same line, will ultimately be needed. But this is good as far as it goes.

Anyway, this testing page works extremely excellently.

hrant's picture

Pablo: Useful and impressive - thanks!

> I chatted with Pablo about having customizable text.

Especially for non-Latin scripts, please!

My main question is: I guess this only shows the "native" rendering?

hhp

Pomeranz's picture

Nice tool. Thank you!

PabloImpallari's picture

@hrant
The page is UTF-8 encoded, inserting non-Lating scripts should be easy.
Email me some non-Latin text and I will be happy to add it.

riccard0's picture

I forgot to mention it works fine in Camino too.

hrant's picture

Pablo, maybe start with a "Non-Latin Pangrams" tab.

Here's the Armenian pangram I use (in all-lc and all-caps):
բել դղյակի ձախ ժամն օֆ ազգությանը ցպահանջ չճշտած վնաս էր և փառք
ԲԵԼ ԴՂՅԱԿԻ ՁԱԽ ԺԱՄՆ ՕՖ ԱԶԳՈՒԹՅԱՆԸ ՑՊԱՀԱՆՋ ՉՃՇՏԱԾ ՎՆԱՍ ԷՐ և ՓԱՌՔ

hhp

PabloImpallari's picture

Latin and Non-Latin pangrams added.
Let me know what else should be added.

hrant's picture

Hey, great tech-support! :-)

hhp

HVB's picture

I must be doing something wrong (Firefox 9.01). I open the page, get the message asking whether to allow local storage, click on yes. Then drag a font into the 'drag here' area, and I do NOT get an updated screen, but instead I see the same thing as if I had clicked link for that font file from a web page, with save and open options.

I only got the browser request once. I have enabled popups for your site and allowed installation of add ons and Java script. I've restarted Firefox after making those changes, and still get the same response. Any ideas?

brianskywalker's picture

Now you just need to add the <textarea> :)

PabloImpallari's picture

@HVB
It seems that for some reason the 'drag area' is not working for you.
You are getting the same behavior as if you drag a font into any other website. Like dragging a font over here for example.

Try this:
Firefox -> Preferences -> Advanced -> Network
You will see a list of the sites allowed for offline data storage.
You should see impallari.com there. Remove it and close the Preferences windows.
Them try the testing page again.

Or try upgrading your Firefox, or try Google Chrome...

HVB's picture

Removed the 'stored data', updated from Firefox 9.01 to 11.0, and of course fgot the "allow?" question again, but otherwise no change. Oh well. It looks like a great piece of work and a very useful tool!

hrant's picture

Pablo, a problem: When a font is missing a character/script, the browser fills in with what it has, which is misleading. Is there a way to get around that?

hhp

PabloImpallari's picture

> Is there a way to get around that?
Nopes, the browser will always fall back to the default system font.

hrant's picture

Then how about a tab that shows a font's supported code ranges?

hhp

PabloImpallari's picture

That's a little out of the scope of this simple tool... but anyway, if you point me to a place that tells me how to do it... maybe it gets implemented.

hrant's picture

It would be nice but it's not a huge deal, since there are other places a person can check to see what the font covers.

Or: Could the site simply state what font is being used to render the given character(s)? If this can't be done only for fonts besides the intended one it would have to be an extra "layer" to avoid a lot of clutter.

hhp

riccard0's picture

A different colour/gray maybe?

hrant's picture

Yes, smart.

hhp

PabloImpallari's picture

That will be nice, but when you apply a color, you apply it to the entire html tag ( < p > for example).
AFAIK applying a different color to a fallback font is not possible.

riccard0's picture

Yes, in order to apply a different colour, every glyph rendered in a different font should be enclosed in a < span > or something else.
Any clue about the “file name starting with number” bug?

Oh, and what about Italian pangrams? ;-)

PabloImpallari's picture

> Any clue about the “file name starting with number” bug?
Don't start your file names with a number ;)

> Oh, and what about Italian pangrams?
Added

Also added a list off all the Latin diacritics at the bottom of the Latin page

Michael Wallner's picture

This is really nice Pablo. I could really see this useful if I could use this before I buy the font, but it is very nice for those that I own as well. Thanks for sharing.

PabloImpallari's picture

Updated to version 6:
- We added the 'Hinting Tab' so you can easily spot hinting problems on your fonts.
- All the text are now editable, so you can write whatever you want while you are testing
- The source code is now available for everyone to download (Please be nice and keep the credits at the bottom of the page)

http://www.impallari.com/testing/

hrant's picture

All the text are now editable

Thank you so much!

hhp

David Waschbüsch's picture

Impressive work! Thanks!

abattis's picture

AFAIK applying a different color to a fallback font is not possible.

Identifying a font on a page is possible with JavaScript; see http://fount.artequalswork.com/ for an example.

So after loading a font from the menu at the top, and a delay of say 2s, you should be able to iterate over every character in the page and check if it uses the expected font, and wrap that char in a span with an 'notgottheglyph' class that has background:yellow or whatever.

PabloImpallari's picture

Updated to v7

Including a handy OT Features Panel for Firefox

This should work on the latest versions of Firefox for Mac, PC and Linux.
For older versions of Firefox, it may be necessary to change the "gfx.font_rendering.harfbuzz.level" preference to "1" in about:config in order to access the OpenType features.

I'm also working on the next update -v8- to make it work on all browsers.

JanekZ's picture

Super mint
Does FireFox support ss11-ss20 and Chain Contextual Positioning?
keep up the good work!

PabloImpallari's picture

Updated to version 8.2

This new version improves the OT panel.
- Now it should work on Google Chrome and Firefox.
- It also shows you my recommended syntax for using OT features in your CSS code, for all browsers.
- You can also print using webfonts from Google Chrome.
- Lettering Sheet "tab" added

http://www.impallari.com/testing/

PabloImpallari's picture

Updated to v8.4 to accommodate for the Firefox 15 public release.

Firefox has changed the way it handles the OT features:
in FF 14, they used a custom "Firefox only" syntax style (now deprecated).
in FF 15, now they have switched to the standard CSS3 syntax.

It's a good thing. Now all the browsers use the same syntax.
On the bad side, what used to work on FF 14 is now broken in FF 15.

The same applies for the testing page:
Now it works on FF 15, but no longer works on FF 14.

PabloImpallari's picture

Version 9.0 updates:
- When editing text in any of the first 7 tabs, the text will update for all sizes.
- In "Words" and "Caps" tabs, we added preview for multiple sizes.
- Added a few extra glyphs in the "Lettering" tab.
- Added more diacritics in the "Latin Tab", now covering all Latin Languages.
- Also added Vietnamese diacritics, and a few more Pangrams and text samples.

Use it freely at:
http://www.impallari.com/testing/

Or grab the source code. Upload to your own server, tweak it to your needs, etc.
http://www.impallari.com/projects/update/93

Suggestion for futures updates are always welcome.

hrant's picture

Nice update! Thank you Pablos and Dave.

BTW not all the non-Latin pangrams are from Wikipedia... ;-)

hhp

PabloImpallari's picture

Next update will add: Armenian pangram by hrant :)
And someone else contributed the Lithuanian Pangram. Can't remember his name right now, will have to check old emails.

hrant's picture

Please say from me, since I didn't make it (and I don't know who did).

hhp

Syndicate content Syndicate content