Typophile

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

This copy was truncated by the archive that captured it, so the thread may be incomplete.

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.

{To Follow}

Nice utility, Pablo! Thanks for sharing.

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.

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.

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

Nice tool. Thank you!

@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.

I forgot to mention it works fine in Camino too.

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

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

hhp

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

Hey, great tech-support! :-)

hhp

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?

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

@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...

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!

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

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

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

hhp

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.

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

A different colour/gray maybe?

Yes, smart.

hhp

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.

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? ;-)

> 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

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.

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/

All the text are now editable

Thank you so much!

hhp

Impressive work! Thanks!

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.

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.

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

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/

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.

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.

Nice update! Thank you Pablos and Dave.

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

hhp

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.

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

hhp

Captured from commoncrawl.org on 28 Apr 2015. original URL