{"id":12329,"library":"utility-opentype","title":"Utility OpenType","description":"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.","status":"abandoned","version":"0.1.4","language":"javascript","source_language":"en","source_url":"https://github.com/kennethormandy/utility-opentype","tags":["javascript","css","oocss","basscss","typography","opentype","font-feature-settings","eyeglass-module","sass"],"install":[{"cmd":"npm install utility-opentype","lang":"bash","label":"npm"},{"cmd":"yarn add utility-opentype","lang":"bash","label":"yarn"},{"cmd":"pnpm add utility-opentype","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"import 'utility-opentype';","symbol":"Sass Styles (default)","correct":"@import \"utility-opentype\";"},{"note":"Use this explicit path in Sass projects if your build system cannot automatically resolve the package name or if not using an Eyeglass module.","symbol":"Sass Styles (full path)","correct":"@import \"../node_modules/utility-opentype/css/utility-opentype\";"},{"note":"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.","symbol":"Compiled CSS (CDN)","correct":"<link href=\"https://cdn.rawgit.com/kennethormandy/utility-opentype/master/css/utility-opentype.min.css\" rel=\"stylesheet\">"}],"quickstart":{"code":"/* Install via npm */\nnpm install --save utility-opentype\n\n/* In your main Sass file (e.g., app.scss) */\n@import \"utility-opentype\";\n\n/* Example HTML usage */\n<p class=\"liga\">The quick brown fox jumps over the lazy dog. ff fi fl</p>\n<p class=\"smcp\">small caps text</p>\n<p class=\"frac\">1/2 + 1/4 = 3/4</p>","lang":"scss","description":"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."},"warnings":[{"fix":"Consider alternatives like directly using `font-feature-settings` in your CSS, or a more actively maintained utility CSS framework that includes typographic features.","message":"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.","severity":"breaking","affected_versions":">=0.1.4"},{"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.","message":"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.","severity":"deprecated","affected_versions":">=0.1.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","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.","error":"Error: File to import not found or unreadable: utility-opentype."},{"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.","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.","error":"OpenType features (e.g., ligatures, small caps) are not appearing in the browser."}],"ecosystem":"npm"}