Type-X, a Chrome extension to test your fonts on any website

Roel Nieskens
Roel Nieskens Posts: 200
in Font Technology
Type-X is a Google Chrome extension that makes it easy and efficient to test local fonts on any website.
  • Browse comfortably to experience your own fonts in context, with blazing-fast font injection and a one-click override.
  • Use your local fonts or add custom font files directly to test real web font files – WOFF2 included. (All fonts stay on your own computer, and nothing is uploaded to any server, etc).
  • Test variable fonts, inheriting multiple existing weights and styles from a website, to preview how the weights of that font behave.
  • Take full control over how you apply your fonts with custom CSS selectors and styles.
  • Avoid "tofu" from icon fonts with preset and custom selectors to ignore icon elements.

This was the first big font project I was commissioned on, for Arrow Type, so I'm happy to report it's been updated and working smoothly in modern Chrome again! With thanks to Simon Cozens and Dave Crossland who recently resuscitated the project.

You can check out the code here: https://github.com/arrowtype/type-x

Or install it from the Chrome web store: https://chromewebstore.google.com/detail/type-x/paelebbajjhdmomglaffoachiepobeag


Comments

  • Abdurrahman Hanif
    Abdurrahman Hanif Posts: 20
    is there possible something like this in Safari? i'm not using Chrome because making my mac heavy  :'(
  • Roel Nieskens
    Roel Nieskens Posts: 200
    This would involve converting the current extension to more cross-browser standards, and go through Apple's bespoke process to make it work in Safari.

    Do-able, certainly. Maybe if there was interest in funding that, we could whip up a plan.
  • Kent Lew
    Kent Lew Posts: 1,020
    For those like me who prefer to use Firefox, you can achieve some similar results using the Stylus extension to apply custom override CSS stylesheets for sites. 
    Type-X seems to perform more general injection without the user needing to bother editing specific CSS rules (unless targeting is desired). But with basic CSS knowledge and a little effort, you can get decent results for testing local fonts in the wild using Stylus on Firefox. 
    For instance, I currently view TypeDrawers with text in one of my WIP fonts. (No disrespect to JTD’s Oculi intended. ;-)
  • Roel Nieskens
    Roel Nieskens Posts: 200
    Yep, that's what Type-X basically automates for you. It makes it a little easier when you've updated your fonts, want to toggle the custom fonts on/off for the site, etc.
  • Kent Lew
    Kent Lew Posts: 1,020
    Stylus custom sheets are assignable by domain, or even full URL, and can be toggled. You can even stack several and toggle combinations. So for instance target font-family in one and add letter-spacing in a separate sheet to toggle on/off.
    What Stylus lacks, and I’m thinking Type-X does, is sniff out the existing DOM to apply font-family somewhat automagically. The Stylus user has to investigate manually and decide how to override.
    I’m not trying to make this a competition. I’d love to see Type-X for Firefox. Just mentioning an alternative until such a time. ;-)
  • Roel Nieskens
    Roel Nieskens Posts: 200
    Not trying to compete either! :-) Porting the extension to Firefox is somewhere on my sideproject to-do list, but I'm currently occupied with wrapping up v2 of Wakamai Fondue. I created an issue to keep track of it: https://github.com/arrowtype/type-x/issues/155

Categories