Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/semencov/tailwindcss-font-inter
TailwindCSS Plugin to integrate with Inter Typeface
https://github.com/semencov/tailwindcss-font-inter
css dynamic-metrics font-features font-size inter-typeface tailwindcss tailwindcss-plugin
Last synced: 4 days ago
JSON representation
TailwindCSS Plugin to integrate with Inter Typeface
- Host: GitHub
- URL: https://github.com/semencov/tailwindcss-font-inter
- Owner: semencov
- License: mit
- Created: 2019-09-22T12:41:22.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-12-03T11:09:53.000Z (about 1 year ago)
- Last Synced: 2024-05-22T19:33:17.102Z (9 months ago)
- Topics: css, dynamic-metrics, font-features, font-size, inter-typeface, tailwindcss, tailwindcss-plugin
- Language: JavaScript
- Homepage:
- Size: 159 KB
- Stars: 80
- Watchers: 4
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Tailwind Inter Plugin
A TailwindCSS plugin that seamlessly integrates the beautiful Inter typeface by Rasmus Andersson ([@rsms](https://twitter.com/rsms)) into your projects. This plugin provides a complete solution for using Inter font with proper metrics and advanced OpenType features.
## Features
- 🎯 Adds `.font-inter` utility class for easy font family application
- ⚙️ Configurable OpenType feature settings (ligatures, numerics, case features, etc.)
- 🔄 Automatic `@font-face` injection from [Inter's CDN](https://rsms.me/inter/inter.css)
- 🎨 Works seamlessly with Tailwind's fontSize configuration
- 🚀 Zero configuration required to get started
## Installation
```sh
# with npm
npm install --save-dev tailwindcss-font-inter
# or with yarn
yarn add -D tailwindcss-font-inter
```
## Quick Start
Add the plugin to your `tailwind.config.js`:
```js
// tailwind.config.js
module.exports = {
theme: {},
plugins: [require('tailwindcss-font-inter')]
}
```
Now you can put `.font-inter` class to apply the font (by default `@font-face` definitions will be added to your CSS).
```html
Beautiful Typography
Your content with the full power of the Inter font features.
```
## Configuration
### Plugin Options
Customize the plugin behavior with these options:
```js
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-font-inter')({
importFontFace: true, // Set to false if you want to import Inter from elsewhere
})
]
}
```
### Font Features
Define custom sets of OpenType features:
```js
// tailwind.config.js
module.exports = {
theme: {
extend: {
interFontFeatures: {
numeric: ['tnum', 'salt', 'ss02'], // Tabular numbers with stylistic alternates
case: ['case'], // Case-sensitive forms
fractions: ['frac'], // Enable fractions
'stylistic-one': ['ss01'] // Stylistic Set 1
}
}
},
plugins: [require('tailwindcss-font-inter')]
}
```
This generates utility classes like:
```css
/* Default features */
.font-feature-default { font-feature-settings: 'calt' 1, 'kern' 1; }
.font-feature-normal { font-feature-settings: normal; }
/* Custom features */
.font-feature-numeric { font-feature-settings: 'tnum' 1, 'salt' 1, 'ss02' 1; }
.font-feature-case { font-feature-settings: 'case' 1; }
.font-feature-fractions { font-feature-settings: 'frac' 1; }
.font-feature-stylistic-one { font-feature-settings: 'ss01' 1; }
```
## Manual Font Import
If you set `importFontFace: false`, you'll need to import Inter yourself. You can use Google Fonts:
```html
```
Or import directly from Inter's CDN:
```css
@import url('https://rsms.me/inter/inter.css');
```
## Browser Support
Inter works in all modern browsers. The font-feature-settings are supported in:
- Chrome 48+
- Firefox 34+
- Safari 9.1+
- Edge 15+
## Credits
This plugin is inspired by [tailwind-plugin-inter-font](https://github.com/imsus/tailwind-plugin-font-inter) by Imam Susanto ([@imsus](https://github.com/imsus)).
## License
[MIT](LICENSE.md)