Registry / web-framework / utility-opentype

utility-opentype

library0.1.4jsnpmunverified

Utility OpenType is a CSS library that provides simple utility classes for applying advanced typographic features (OpenType features) to web content. It aims to make OpenType features as straightforward to use as basic styles like bold and italics, ensuring predictable cascading and graceful fallbacks in browsers that don't fully support feature queries. The library is very lightweight, less than 1.75KB gzipped, and is designed to work standalone or alongside other CSS frameworks. The current stable version is 0.1.4, released in May 2016. Given the lack of updates since then, the project appears to be abandoned, with no active development or planned releases, which should be considered when adopting it for new projects.

web-framework

npm install utility-opentype

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · UTILITY-OPENTYPE

utility-opentype

web-frameworkjavascriptv0.1.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Sass Styles (default)

✓ @import "utility-opentype";

✗ import 'utility-opentype';

This is a Sass @import statement, not a JavaScript import. This assumes your build system (e.g., Webpack, Vite) is configured to resolve 'utility-opentype' to its main Sass file in node_modules.

Sass Styles (full path)

✓ @import "../node_modules/utility-opentype/css/utility-opentype";

Use this explicit path in Sass projects if your build system cannot automatically resolve the package name or if not using an Eyeglass module.

Compiled CSS (CDN)

✓ <link href="https://cdn.rawgit.com/kennethormandy/utility-opentype/master/css/utility-opentype.min.css" rel="stylesheet">

This directly links the compiled CSS from a CDN. Note that cdn.rawgit.com is deprecated and will eventually stop serving files, making this method unreliable for long-term production use.

Demonstrates installation via npm and basic Sass import, followed by example HTML markup using some of the utility classes for OpenType features like ligatures, small caps, and fractions.

/* Install via npm */ npm install --save utility-opentype /* In your main Sass file (e.g., app.scss) */ @import "utility-opentype"; /* Example HTML usage */ The quick brown fox jumps over the lazy dog. ff fi fl small caps text 1/2 + 1/4 = 3/4

Debug

Known issues

breakingThe project is no longer actively maintained. The last release (v0.1.4) was in May 2016. This means there will be no future updates, bug fixes, or security patches.

fix

Consider alternatives like directly using `font-feature-settings` in your CSS, or a more actively maintained utility CSS framework that includes typographic features.

affects: >=0.1.4

deprecatedThe CDN used for direct CSS linking (cdn.rawgit.com) is deprecated and will eventually stop serving files. Relying on this CDN for production is highly discouraged.

fix

Self-host the `utility-opentype.min.css` file from your own server or use a reliable, actively maintained CDN if you must include it directly without a build step.

affects: >=0.1.0

gotchaOpenType features (and thus these utility classes) will only apply if the chosen font actually supports the specific feature. Additionally, browser support for `font-feature-settings` varies, with graceful fallback for unsupported features.

fix

Always test the desired OpenType features with your selected font in target browsers. Provide appropriate fallback styles for browsers that do not support certain features or fonts.

affects: >=0.1.0

gotchaThe package is a CSS/Sass library, not a JavaScript library. While installed via npm, its integration typically involves a Sass preprocessor or direct CSS linking within your HTML or build pipeline, not standard JavaScript module imports.

fix

Ensure your project's build configuration (e.g., Webpack, Vite, Gulp) is set up to correctly process Sass files or include static CSS assets. Do not attempt to `import` this package as a JavaScript module.

affects: >=0.1.0

Errors

Common errors & fixes

Error: File to import not found or unreadable: utility-opentype.

Your Sass preprocessor cannot find the `utility-opentype` module. This often happens if the `node_modules` path is not included in Sass's import paths, or if using a vanilla Sass setup without Eyeglass.

fix

When using Sass without tools like Eyeglass or a configured build system, use the full relative path: `@import "../node_modules/utility-opentype/css/utility-opentype";`. For build systems, ensure `node_modules` is added to your Sass import paths.

OpenType features (e.g., ligatures, small caps) are not appearing in the browser.

The active font may not support the specific OpenType feature, or the browser might not fully support `font-feature-settings` for that particular feature.

fix

Verify that your font file (e.g., WOFF2) explicitly includes the OpenType features you are trying to enable. Check browser compatibility tables for `font-feature-settings` and ensure your browser version supports the feature. Use developer tools to inspect computed CSS properties.

Upgrade

Version history

0.1.4latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/kennethormandy/utility-opentype ↗

packagehttps://www.npmjs.com/package/utility-opentype ↗

homepagehttp://utility-opentype.kennethormandy.com ↗