Utility OpenType

0.1.4 · abandoned · verified Sun Apr 19

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.

Common errors

```
Error: File to import not found or unreadable: utility-opentype.
```
cause 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.
```
cause 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.

Warnings

breaking The 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.
deprecated The 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.
gotcha OpenType 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.
gotcha The 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.

Install

npm install utility-opentype npm
yarn add utility-opentype yarn
pnpm add utility-opentype pnpm

Imports

Sass Styles (default)
wrong:
```
import 'utility-opentype';
```
correct:
```
@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.

Quickstart

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 */
<p class="liga">The quick brown fox jumps over the lazy dog. ff fi fl</p>
<p class="smcp">small caps text</p>
<p class="frac">1/2 + 1/4 = 3/4</p>

view raw JSON →