@obvia/fonts 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/readme.md +0 -169
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "keywords" : ["obvia","obvia mono","obvia sans","obvia pixel","typeface","fonts","obvia fonts","webfont","open-type","true-type","typography"],
5
5
  "license" : "SIL OPEN FONT LICENSE",
6
6
  "homepage" : "https://obvia.studio/fonts",
7
- "version" : "0.0.1",
7
+ "version" : "0.0.2",
8
8
 
9
9
  "author" : {
10
10
  "name" : "Selçuk Çukur",
package/readme.md DELETED
@@ -1,169 +0,0 @@
1
- ![](https://raw.githubusercontent.com/vercel/obvia-font/main/packages/next/images/hero.png)
2
-
3
- # Obvia Sans, Obvia Mono & Obvia Pixel
4
-
5
- Obvia is a new font family created by [Vercel](https://vercel.com/design) in collaboration with [Basement Studio](https://basement.studio/).
6
-
7
- Obvia Sans is a sans-serif typeface designed for legibility and simplicity. It is modern, geometric, and based on the principles of classic Swiss typography. It is designed to be used in body copy, headlines, logos, posters, and other large display sizes.
8
-
9
- Obvia Mono is a monospaced typeface, crafted to be the perfect partner to Obvia Sans. It is designed to be used in code editors, diagrams, terminals, and other text-based interfaces where code is rendered.
10
-
11
- Obvia Pixel is a display typeface family featuring five unique pixel-based variants, each with a distinct visual style. It is designed for decorative use in headlines, logos, and other display contexts where a pixelated aesthetic is desired.
12
-
13
- ### Installation
14
-
15
- ```sh
16
- npm install obvia
17
- ```
18
-
19
- ### Using with Next.js
20
-
21
- `ObviaSans` is exported from `obvia/font/sans`, `ObviaMono` can be found in `obvia/font/mono`, and Obvia Pixel variants are available from `obvia/font/pixel`. All are `NextFontWithVariable` instances. You can learn more by [reading the `next/font` docs](https://nextjs.org/docs/app/building-your-application/optimizing/fonts).
22
-
23
- #### Obvia Pixel Variants
24
-
25
- Obvia Pixel includes five distinct variants, each exported separately:
26
-
27
- | Export | CSS Variable | Description |
28
- | -------------------- | ----------------------------- | ------------------------ |
29
- | `ObviaPixelSquare` | `--font-obvia-pixel-square` | Square pixel shapes |
30
- | `ObviaPixelGrid` | `--font-obvia-pixel-grid` | Grid-based pixel pattern |
31
- | `ObviaPixelCircle` | `--font-obvia-pixel-circle` | Circular pixel shapes |
32
- | `ObviaPixelTriangle` | `--font-obvia-pixel-triangle` | Triangular pixel shapes |
33
- | `ObviaPixelLine` | `--font-obvia-pixel-line` | Line-based pixel pattern |
34
-
35
- ```jsx
36
- import {
37
- ObviaPixelSquare,
38
- ObviaPixelGrid,
39
- ObviaPixelCircle,
40
- ObviaPixelTriangle,
41
- ObviaPixelLine,
42
- } from "obvia/font/pixel";
43
- ```
44
-
45
- #### App Router
46
-
47
- In `app/layout.js`:
48
-
49
- ```jsx
50
- import { ObviaSans } from "obvia/font/sans";
51
-
52
- export default function RootLayout({ children }) {
53
- return (
54
- <html lang="en" className={ObviaSans.className}>
55
- <body>{children}</body>
56
- </html>
57
- );
58
- }
59
- ```
60
-
61
- #### Pages Router
62
-
63
- In `pages/_app.js`:
64
-
65
- ```jsx
66
- import { ObviaSans } from "obvia/font/sans";
67
-
68
- export default function MyApp({ Component, pageProps }) {
69
- return (
70
- <main className={ObviaSans.className}>
71
- <Component {...pageProps} />
72
- </main>
73
- );
74
- }
75
- ```
76
-
77
- If you're using a version of Next.js that's older than 15, then in `next.config.js` or `next.config.mjs` add:
78
-
79
- ```diff js
80
- /** @type {import('next').NextConfig} */
81
- const nextConfig = {
82
- reactStrictMode: true,
83
- + transpilePackages: ["obvia"],
84
- };
85
-
86
- export default nextConfig;
87
- ```
88
-
89
- This is required to fix errors like:
90
-
91
- - `TypeError: next_font_local__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function`
92
- - `SyntaxError: Cannot use import statement outside a module`
93
-
94
- #### With Tailwind CSS
95
-
96
- All Obvia fonts can be used through CSS variables.
97
-
98
- - `ObviaSans`: `--font-obvia-sans`
99
- - `ObviaMono`: `--font-obvia-mono`
100
- - `ObviaPixelSquare`: `--font-obvia-pixel-square`
101
- - `ObviaPixelGrid`: `--font-obvia-pixel-grid`
102
- - `ObviaPixelCircle`: `--font-obvia-pixel-circle`
103
- - `ObviaPixelTriangle`: `--font-obvia-pixel-triangle`
104
- - `ObviaPixelLine`: `--font-obvia-pixel-line`
105
-
106
- In `app/layout.js`:
107
-
108
- ```jsx
109
- import { ObviaSans } from "obvia/font/sans";
110
- import { ObviaMono } from "obvia/font/mono";
111
- import { ObviaPixelSquare } from "obvia/font/pixel";
112
-
113
- export default function RootLayout({ children }) {
114
- return (
115
- <html
116
- lang="en"
117
- className={`${ObviaSans.variable} ${ObviaMono.variable} ${ObviaPixelSquare.variable}`}
118
- >
119
- <body>{children}</body>
120
- </html>
121
- );
122
- }
123
- ```
124
-
125
- ##### Tailwind CSS V4
126
-
127
- Then in `tailwind.css`:
128
-
129
- ```css
130
- @theme {
131
- /* rest of your theme config */
132
-
133
- --font-sans: var(--font-obvia-sans);
134
- --font-mono: var(--font-obvia-mono);
135
- --font-pixel-square: var(--font-obvia-pixel-square);
136
- --font-pixel-grid: var(--font-obvia-pixel-grid);
137
- --font-pixel-circle: var(--font-obvia-pixel-circle);
138
- --font-pixel-triangle: var(--font-obvia-pixel-triangle);
139
- --font-pixel-line: var(--font-obvia-pixel-line);
140
-
141
- /* rest of your theme config */
142
- }
143
- ```
144
-
145
- ##### Tailwind CSS V3
146
-
147
- Then in `tailwind.config.js`:
148
-
149
- ```javascript
150
- module.exports = {
151
- theme: {
152
- extend: {
153
- fontFamily: {
154
- sans: ["var(--font-obvia-sans)"],
155
- mono: ["var(--font-obvia-mono)"],
156
- "pixel-square": ["var(--font-obvia-pixel-square)"],
157
- "pixel-grid": ["var(--font-obvia-pixel-grid)"],
158
- "pixel-circle": ["var(--font-obvia-pixel-circle)"],
159
- "pixel-triangle": ["var(--font-obvia-pixel-triangle)"],
160
- "pixel-line": ["var(--font-obvia-pixel-line)"],
161
- },
162
- },
163
- },
164
- };
165
- ```
166
-
167
- ### License
168
-
169
- The Obvia font family is free and open sourced under the [SIL Open Font License](../../LICENSE.txt).