Drag and drop font testing page

PabloImpallariPabloImpallari Posts: 527
edited March 2013 in Type Design Software
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:

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


  • Is there a link or am I missing it?
  • Thanks Pablo.
    Smart interface.
    FWIW, for my workflow "hamburgefonstiv" would be more useful than "adhesion."
  • "hamburgefonstiv" added.

    Let me know witch other things can be added, or improved.
  • Now that's responsive development! :-)
  • James PuckettJames Puckett Posts: 1,647
    This is a great tool. It would be nice if the layout, lowercase, and Caps buttons worked in combination with adhesion and hamburgefontsiv.
  • Mark SimonsonMark Simonson Posts: 1,137
    Very nice.
  • @James:
    Nice suggestion. I will think how to make that combination possible without bloating the interface.
  • That kerning text looks familiar!
  • James PuckettJames Puckett Posts: 1,647
    You do not even need to change the interface to do it. Just allow both buttons to be on at once.
  • PabloImpallariPabloImpallari Posts: 527
    edited April 2012
    @JM: Yes, I grabbed that string from a Typophile thread some time ago and saved it as a txt.
    Sorry for not remembering that you are the author. I'll add you to the credits.

    @JP: Currently they are 2 different tabs, so making them work at the same time isn't that easy.
    I will find a way soon.
  • Great tool Pablo, thank you for your hard work.
  • Just added 2 more tabs:
    - Diacritics for all 105 Latin Languages & Latin Pangrams
    - Non-Lating Pangrams
  • the non-Latin fonts don’t update for me. I can’t get Arabic or Devanagari to work. I haven’t tested anything further. Using Chrome on Win XP, uploading OTF files. Actually, the Latin portion of the fonts in question do change, but the non-Latin portions do not.
  • Hi Paul:
    The text there is copy/pasted from wikipedia.. maybe there are some encoding problem.
    If you can send me new text strings for Non-Latin, I will be happy to replace them.

    Btw: I dragged 'Adobe Arabic', 'DroidNaskh' and a few more, and Arabic it's working here.
    I can't test Devanagari as I don't have any Devanagari font.

  • 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)

  • Hiya Pablo,
    The tester is not recognizing my 718 font family. Are numbers in the family name a problem?
  • Yep, but only if the filename starts with numbers.
    If the numbers are at the middle or at the end, seems to work fine.
  • Craig EliasonCraig Eliason Posts: 898
    I recognize it would require far more complicated programming, but it would be cool if, when editing the text in the first, waterfall, tab, the text in each size changed accordingly.
  • Well the numbers are at the start of the file name. So it is a problem.
  • PabloImpallariPabloImpallari Posts: 527
    edited May 2012
    Great Idea.. will look into it.

    The filenames are handled at lines 64 and 65 of the fondrag.js file.
    droppedFileName = droppedFullFileName.replace(/\..+$/,""); // Removes file extension from name droppedFileName = droppedFileName.replace(/\W+/g, "-"); // Replace any non alpha numeric characters with -
    I'm not very experienced with reg-ex (regular expressions) so I can't fix it.
    If someone can provide me a better reg-ex, I will replace it.
    Otherwise you will have to rename your files and simply add any letter before the numbers.
  • Otherwise you will have to rename your files and simply add any letter before the numbers.
    Well that's not going to happen.
  • Stephen ColesStephen Coles Posts: 759
    edited May 2012
    James, there are apps that batch rename files quickly and for free.
  • Thanks for sharing this, Pablo. It’s very handy.
  • @PabloImpallari

    I should have some spare time at the end of the week, if you would like, I'll see if I can figure out the reg-ex issue.
  • Thanks James!
    If you find a solution, you can post it here: http://www.impallari.com/projects/update/32 attached as a zip file.
  • Georg SeifertGeorg Seifert Posts: 587
    This is a really tool. I only have one problem. It does not show kerning. I’m using Chrome on MacOSX 10.7.
  • @Georg
    That's up to the browser. Try Firefox ( 'liga' and 'calt' also ON by default).
  • Göran SöderströmGöran Söderström Posts: 117
    edited May 2012
    You have to use the "text-rendering: OptimizeLegibility" for kerning to show in some browsers, perhaps it could be built in in the testing page in next version if not there already.
  • 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.
Sign In or Register to comment.