Detect Opentype Features of a font file via Browser

I'm looking for a way to find out, via web browser, perhaps by uploading or drag/drop of a font file in the most familiar extensions (.otf, .ttf, .woff, .eot) what OpenType features are present in a certain font file/type family.

It's somewhat similar to @PabloImpallari font tester, with the difference of each OT Feature present in the font being highlighted and the others disabled in a list.

This would prove useful for the setting up of dynamic web type specimens, for example.

Does anyone know a tool that already does it? If not, what do you think would be necessary to build it (eg. reading a specific table from the font file, etc.?)

thanks!

Comments

  • glukgluk Posts: 17
    edited October 2016
    If your server work with python, you can read all available GPOS/GSUB features in uploaded font (OTF, TTF, WOFF) with Compositor and small python file:

    #!/usr/bin/python  
    from compositor import Font
    uploadedFont="/path_to_uploaded_font/fontname.otf";
    font = Font(uploadedFont);
    features = font.getFeatureList();
    print features;

  • Using FontKit you have font.availableFeatures
  • Indra KupferschmidIndra Kupferschmid Posts: 246
    edited October 2016
    The @PabloImpallari tester does have extensive OT feature listing and support but more to use in the specimens rather than just detect. But maybe that could be an easy enough addition? Like you say, highlighting which of the listed features are included in the fonts? 
  • I use that regularly for all font info but it doesn’t list features (or I’m blind). May also be easy to add to that one, right. 
  • I saw this opentype js today and didn't see that kerning check box. I'll look into it to see if it's easy to extract all ot features.
  • @Indra Kupferschmid show which ones are available and treat them into an interface to activate/deactivate them.

  • @Lasse Fister is working on this for me at the moment
  • I've done a lot of work on test pages in HTML for webfonts - or printfonts conscripted for web use, if you don't mind my making the distinction - and knowing front-end ES (that's means JavaScript to us geezers over forty) as I do, my instincts tell me there must be, at least, some way to rifle through the properties of each OpenType feature supported by the browser, inspect the font's properties feature by feature, and see what values pop up. If there ain't no way, there ought to be. And it's a serious matter to be pursued with browser makers and the W3C.
    A font's contents - or at least it's OpenType conformant contents - shouldn't be a black box with designers dependant upon outside info - pdfs and such - to know what's available.
  • Maybe use JS to parse the otf file and get the feature list of the GSUB/GPOS table?
  • Opentype.js parses the GSUB table, but not GPOS. There's talk about supporting it though. Fontkit doesn't seem to be able to dump GSUB/GPOS for own inspection, but it can dump a list of a font's features, e.g. for Roboto Black:
    [ 'aalt', 'liga', 'lnum', 'pnum', 'smcp', 'ss01', 'ss02', 'kern' ]
    I have only dabbled with both, for a similar project (being able to inspect a font in the browser and generate the CSS needed to use every feature in a webpage).
  • @Roel Nieskens If you want to dump a particular table with fontkit, you can access it directly on the font object, e.g. `font.GSUB` or `font.GPOS`.
  • FontCreator allows you to test a font in a web browser. It is known as Test WOFF. The generated web page shows all OpenType features as available in the font. Here is a web font sample page:
    http://www.high-logic.com/fontcreator/wofftest.html

  • It is definitely not browser-based but if you want to check which OpenType Layout features are present in a CFF or TTF font, the free light version of DTL OTMaster (macOS, Windows, Linux) might be useful. The full OTM version (an absolute bargain for €255) also opens WOFF(2).
Sign In or Register to comment.