typefaces - NPM packages for Open Source typefaces

•    CSS

---

NPM packages for Open Source typefaces — making it easier to self-host webfonts. Each typeface package ships with all the necessary font files and css to self-host an open source typeface.

typeface font font-family typography

zoom - jQuery Text Zoom Plugin

•    JQuery

---

jQuery Text Zoom Plugin

jquery-plugin zoom text resize design alignment font readability typography resizer font-family text-color font-color article seo user-experience

DetectFont - Detect which font your system has cherry-picked from font-family.

•    Javascript

---

Detect which font your system has cherry-picked from font-family.

font detect font-family css

postcss-short - Use advanced shorthand properties in CSS

•    Javascript

---

Postcss Short lets you use advanced shorthand properties in CSS. Postcss Short has been featured in Smashing Magazine. I hope all of these shorthands are useful and clear to first-time lookers. I hope they improve the readability of your stylesheets and save you development time along the way. Thank you so much for your support.

postcss css postcss-plugin shorthands asterisks colors backgrounds margins paddings spacings positions sizes sizings min-sizes max-sizes texts font-styles font-variants font-weights font-stretchs text-decorations text-aligns text-renderings text-transforms white-spaces font-sizes line-heights letter-spacings word-spacings font-families font-family datas attributes

postcss-minify-font-values - Minify font declarations with PostCSS

•    Javascript

---

Minify font declarations with PostCSS. This module will try to minimise the font-family, font-weight and font shorthand properties; it can unquote font families where necessary, detect & remove duplicates, and cut short a declaration after it finds a keyword. For more examples, see the tests.

css font font-family font-weight optimise postcss-plugin

font-face-generator - A powerful @font-face generator for scss

•    CSS

---

Writing custom @font-face code is a huge pain. It is extremely repetitive and requires a lot of typing for each font style and font weight you wish to add to your site. There is the Font-Squirrel generator but it doesn't take font-weight and font-style into consideration when generating the @font-face code. It just generates each font as a separate font family. This means that when writing styles, you can't just write font-weight: bold, you have to write font-family: "font-name-bold". If the font name is long then that's a lot of extra characters you will need to write over and over again. It's simply not letting you write your styles in the way they are meant to be written.

font-family font-face-generator scss font-weights mixin font-face mixins generator @font-face sass fonts css

fi - A snippet for inspecting font-family usage in a webpage.

•    Javascript

---

A snippet for inspecting font-family usage in a webpage. To have a quick look into font-family usage in a webpage.

font-family