Skip to content

Commit d54ee7a

Browse files
semencovsemencov
committed
Updated README.md
1 parent abb1b60 commit d54ee7a

File tree

5 files changed

+121
-649
lines changed

5 files changed

+121
-649
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
- Removed plugin specific font size classes to use inherited classes instead (`.text-inter-lg` → `.font-inter .text-lg`)
88
- Limited font feature settings classes to apply only if Inter font family applied (`.font-feature-numeric` → `.font-inter .font-feature-numeric`)
99
- Added `.font-feature-default` class with `calt` and `kern` font feature settings enabled
10+
- Option `importFontFace` is now `true` by default
1011

1112
### Version 1.0.8
1213

‎README.md‎

Lines changed: 16 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
11
# Tailwind Inter Plugin
22

3-
TailwindCSS Plugin to integrate with Inter Typeface from Rasmus Andersson [@rsms](https://twitter.com/rsms).
3+
TailwindCSS Plugin to integrate with Inter Typeface from Rasmus Andersson [@rsms](https://twitter.com/rsms). It adds `.font-inter` class to apply Inter font family, adjusts letter spacing for each font size according to the [Dynamic Metrics](https://rsms.me/inter/dynmetrics/) and allows to toggle font feature settings. Optionally adds `@font-face` from [https://rsms.me/inter/inter.css](https://rsms.me/inter/inter.css).
44

55
The plugin is inspired with [tailwind-plugin-inter-font](https://github.com/suburbicode/tailwind-plugin-font-inter) plugin developed by Imam Susanto [@imsus](https://github.com/imsus).
66

7-
## Features
8-
9-
- Optionally adds `@font-face` from [https://rsms.me/inter/inter.css](https://rsms.me/inter/inter.css),
10-
- [Dynamic Metrics](https://rsms.me/inter/dynmetrics/) utilities,
11-
- Font feature settings utilities.
12-
137
## Installation
148

159
```sh
@@ -35,6 +29,14 @@ module.exports = {
3529
};
3630
```
3731

32+
Now you can put `.font-inter` class to apply the font (by default `@font-face` defenitions will be added to your CSS).
33+
34+
```html
35+
<body class="font-inter text-base text-black bg-white antialiased font-feature-default">
36+
...
37+
</body>
38+
```
39+
3840
You can set additional options for plugin:
3941

4042
```js
@@ -48,7 +50,7 @@ module.exports = {
4850
b: 0.185,
4951
c: -0.1745,
5052
baseFontSize: 16,
51-
importFontFace: false,
53+
importFontFace: true,
5254
})
5355
]
5456
};
@@ -60,7 +62,7 @@ The plugin has several adjustable options.
6062

6163
- `a`, `b`, `c` — constants used to calculate [Dynamic Metrics](https://rsms.me/inter/dynmetrics/).
6264
- `baseFontSize` — integer for base font size, default is `16`.
63-
- `importFontFace` — flag to inject Inter's `@font-face` to the output, default is `false`. If `false`, you should inport Inter CSS by yourself.
65+
- `importFontFace` — flag to inject Inter's `@font-face` to the output, default is `true`. If `false`, you should import Inter by yourself (e.g. from Google Fonts).
6466

6567
### Theme Configuration
6668

@@ -90,152 +92,15 @@ module.exports = {
9092
};
9193
```
9294

93-
## Output
94-
95-
This package will generate CSS on components section and utilities section.
96-
9795
### Font Family
9896

99-
The plugin will add some `@font-face` declaration in base (if `importFontFace` option is set to `true`) and add `.font-inter` utility class.
100-
101-
```css
102-
/* Just a copy of https://rsms.me/inter/inter.css */
103-
104-
@font-face {
105-
  font-family: Inter UI;
106-
  font-style: normal;
107-
  font-weight: 400;
108-
  font-display: swap;
109-
  src: url('https://rsms.me/inter/font-files/Inter-UI-Regular.woff2?v=3.1') format('woff2'),   
110-
url('https://rsms.me/inter/font-files/Inter-UI-Regular.woff?v=3.1') format('woff');
111-
}
112-
113-
@font-face {
114-
  font-family: Inter UI;
115-
  font-style: italic;
116-
  font-weight: 400;
117-
  font-display: swap;
118-
  src: url('https://rsms.me/inter/font-files/Inter-UI-Italic.woff2?v=3.1') format('woff2'), url('https://rsms.me/inter/font-files/Inter-UI-Italic.woff?v=3.1')
119-
format('woff');
120-
}
121-
122-
@font-face {
123-
  font-family: Inter UI;
124-
  font-style: normal;
125-
  font-weight: 500;
126-
  font-display: swap;
127-
  src: url('https://rsms.me/inter/font-files/Inter-UI-Medium.woff2?v=3.1') format('woff2'), url('https://rsms.me/inter/font-files/Inter-UI-Medium.woff?v=3.1')
128-
format('woff');
129-
}
130-
131-
@font-face {
132-
  font-family: Inter UI;
133-
  font-style: italic;
134-
  font-weight: 500;
135-
  font-display: swap;
136-
  src: url('https://rsms.me/inter/font-files/Inter-UI-MediumItalic.woff2?v=3.1') format('woff2'), url('https://rsms.me/inter/font-files/Inter-UI-MediumItalic.woff?v=3.1')
137-
format('woff');
138-
}
139-
140-
@font-face {
141-
  font-family: Inter UI;
142-
  font-style: normal;
143-
  font-weight: 600;
144-
  font-display: swap;
145-
  src: url('https://rsms.me/inter/font-files/Inter-UI-SemiBold.woff2?v=3.1') format('woff2'), url('https://rsms.me/inter/font-files/Inter-UI-SemiBold.woff?v=3.1')
146-
format('woff');
147-
}
148-
149-
@font-face {
150-
  font-family: Inter UI;
151-
  font-style: italic;
152-
  font-weight: 600;
153-
  font-display: swap;
154-
  src: url('https://rsms.me/inter/font-files/Inter-UI-SemiBoldItalic.woff2?v=3.1') format('woff2'), url('https://rsms.me/inter/font-files/Inter-UI-SemiBoldItalic.woff?v=3.1')
155-
format('woff');
156-
}
157-
158-
@font-face {
159-
  font-family: Inter UI;
160-
  font-style: normal;
161-
  font-weight: 700;
162-
  font-display: swap;
163-
  src: url('https://rsms.me/inter/font-files/Inter-UI-Bold.woff2?v=3.1') format('woff2'), url('https://rsms.me/inter/font-files/Inter-UI-Bold.woff?v=3.1')
164-
format('woff');
165-
}
166-
167-
@font-face {
168-
  font-family: Inter UI;
169-
  font-style: italic;
170-
  font-weight: 700;
171-
  font-display: swap;
172-
  src: url('https://rsms.me/inter/font-files/Inter-UI-BoldItalic.woff2?v=3.1') format('woff2'), url('https://rsms.me/inter/font-files/Inter-UI-BoldItalic.woff?v=3.1')
173-
format('woff');
174-
}
175-
176-
@font-face {
177-
  font-family: Inter UI;
178-
  font-style: normal;
179-
  font-weight: 800;
180-
  font-display: swap;
181-
  src: url('https://rsms.me/inter/font-files/Inter-UI-ExtraBold.woff2?v=3.1') format('woff2'), url('https://rsms.me/inter/font-files/Inter-UI-ExtraBold.woff?v=3.1')
182-
format('woff');
183-
}
184-
185-
@font-face {
186-
  font-family: Inter UI;
187-
  font-style: italic;
188-
  font-weight: 800;
189-
  font-display: swap;
190-
  src: url('https://rsms.me/inter/font-files/Inter-UI-ExtraBoldItalic.woff2?v=3.1') format('woff2'), url('https://rsms.me/inter/font-files/Inter-UI-ExtraBoldItalic.woff?v=3.1')
191-
format('woff');
192-
}
193-
194-
@font-face {
195-
  font-family: Inter UI;
196-
  font-style: normal;
197-
  font-weight: 900;
198-
  font-display: swap;
199-
  src: url('https://rsms.me/inter/font-files/Inter-UI-Black.woff2?v=3.1') format('woff2'), url('https://rsms.me/inter/font-files/Inter-UI-Black.woff?v=3.1')
200-
format('woff');
201-
}
202-
203-
@font-face {
204-
  font-family: Inter UI;
205-
  font-style: italic;
206-
  font-weight: 900;
207-
  font-display: swap;
208-
  src: url('https://rsms.me/inter/font-files/Inter-UI-BlackItalic.woff2?v=3.1') format('woff2'), url('https://rsms.me/inter/font-files/Inter-UI-BlackItalic.woff?v=3.1')
209-
format('woff');
210-
}
211-
212-
@font-face {
213-
  font-family: Inter UI var;
214-
  font-style: oblique 0deg 10deg;
215-
  font-weight: 400 900;
216-
  font-display: swap;
217-
  src: url('https://rsms.me/inter/font-files/Inter-UI.var.woff2?v=3.1') format('woff2-variations'), url('https://rsms.me/inter/font-files/Inter-UI.var.woff2?v=3.1')
218-
format('woff2');
219-
}
220-
221-
.font-inter {
222-
  font-family: 'Inter UI', sans-serif;
223-
}
224-
225-
@supports (font-variation-settings: normal) {
226-
  .font-inter {
227-
    font-family: 'Inter UI var', sans-serif;
228-
}
229-
}
230-
```
97+
The plugin will inject `@font-face` declaration from https://rsms.me/inter/inter.css (set `importFontFace` option to `false` to import font manually) and add `.font-inter` utility class.
23198

23299
## Font Sizes
233100

234-
Alongside with the default `text-lg` classes, the plugin will generate nested `text-lg` to set also letter spacing according to Inter's **Dynamic Metrics**.
101+
Alongside with the default `text-lg` classes, the plugin will generate nested `text-lg` to set letter spacing according to Inter's **Dynamic Metrics**.
235102

236103
```css
237-
/* Will be generated on @tailwind utilities; */
238-
239104
.font-inter .text-xs,
240105
.font-inter.text-xs {
241106
font-size: 0.75rem;
@@ -293,7 +158,7 @@ Alongside with the default `text-lg` classes, the plugin will generate nested `t
293158

294159
### Font features
295160

296-
Also the plugin generates utility classes which allow you to specify named font feature settings.
161+
Also the plugin generates utility classes which allow you to specify named sets of font feature settings.
297162

298163
```js
299164
// tailwind.config.js
@@ -310,7 +175,7 @@ module.exports = {
310175
This will generate the following classes:
311176

312177
```css
313-
/* This is a default classes */
178+
/* This is default classes */
314179
.font-inter .font-feature-normal,
315180
.font-inter.font-feature-normal {
316181
font-feature-settings: normal;
@@ -321,7 +186,7 @@ This will generate the following classes:
321186
font-feature-settings: 'calt' 1, 'kern' 1;
322187
}
323188

324-
/* This is a custom class defuned in config */
189+
/* This is a custom class defined in config */
325190
.font-inter .font-feature-numeric,
326191
.font-inter.font-feature-numeric {
327192
font-feature-settings: 'tnum' 1, 'salt' 1, 'ss02' 1;

0 commit comments

Comments
 (0)