Drag and drop font testing page

PabloImpallari
PabloImpallari Posts: 806
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:
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.
«1

Comments

  • Jackson Showalter-Cavanaugh
    Jackson Showalter-Cavanaugh Posts: 539
    Is there a link or am I missing it?
  • PabloImpallari
    PabloImpallari Posts: 806
    Yep.. link added
    http://www.impallari.com/testing/
  • Craig Eliason
    Craig Eliason Posts: 1,440
    Thanks Pablo.
    Smart interface.
    FWIW, for my workflow "hamburgefonstiv" would be more useful than "adhesion."
  • PabloImpallari
    PabloImpallari Posts: 806
    "hamburgefonstiv" added.

    Let me know witch other things can be added, or improved.
  • Craig Eliason
    Craig Eliason Posts: 1,440
    Now that's responsive development! :-)
  • James Puckett
    James Puckett Posts: 1,998
    This is a great tool. It would be nice if the layout, lowercase, and Caps buttons worked in combination with adhesion and hamburgefontsiv.
  • Mark Simonson
    Mark Simonson Posts: 1,739
    Very nice.
  • PabloImpallari
    PabloImpallari Posts: 806
    @James:
    Nice suggestion. I will think how to make that combination possible without bloating the interface.
  • [Deleted User]
    [Deleted User] Posts: 0
    The user and all related content has been deleted.
  • James Puckett
    James Puckett Posts: 1,998
    You do not even need to change the interface to do it. Just allow both buttons to be on at once.
  • PabloImpallari
    PabloImpallari Posts: 806
    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.
  • [Deleted User]
    [Deleted User] Posts: 0
    The user and all related content has been deleted.
  • PabloImpallari
    PabloImpallari Posts: 806
    Just added 2 more tabs:
    - Diacritics for all 105 Latin Languages & Latin Pangrams
    - Non-Lating Pangrams
  • pauldhunt
    pauldhunt Posts: 5
    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.
  • PabloImpallari
    PabloImpallari Posts: 806
    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.

  • PabloImpallari
    PabloImpallari Posts: 806
    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/
  • [Deleted User]
    [Deleted User] Posts: 0
    The user and all related content has been deleted.
  • PabloImpallari
    PabloImpallari Posts: 806
    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 Eliason
    Craig Eliason Posts: 1,440
    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.
  • [Deleted User]
    [Deleted User] Posts: 0
    The user and all related content has been deleted.
  • PabloImpallari
    PabloImpallari Posts: 806
    edited May 2012
    @Craig
    Great Idea.. will look into it.

    @James
    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.
  • [Deleted User]
    [Deleted User] Posts: 0
    The user and all related content has been deleted.
  • Stephen Coles
    Stephen Coles Posts: 1,008
    edited May 2012
    James, there are apps that batch rename files quickly and for free.
  • Göran Söderström
    Göran Söderström Posts: 117
    Thanks for sharing this, Pablo. It’s very handy.
  • James Hultquist-Todd
    James Hultquist-Todd Posts: 420
    @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.
  • PabloImpallari
    PabloImpallari Posts: 806
    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 Seifert
    Georg Seifert Posts: 674
    This is a really tool. I only have one problem. It does not show kerning. I’m using Chrome on MacOSX 10.7.
  • PabloImpallari
    PabloImpallari Posts: 806
    @Georg
    That's up to the browser. Try Firefox ( 'liga' and 'calt' also ON by default).
  • Göran Söderström
    Gö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.
  • PabloImpallari
    PabloImpallari Posts: 806
    Updated to v7

    Including a handy OT Features Panel for Firefox
    image

    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.

Categories