Skip to content

Commit 87acee4

Browse files
stafyniaksachastafyniaksacha
committed
chore: init
0 parents  commit 87acee4

15 files changed

+2867
-0
lines changed

‎.eslintrc.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
"extends": "@antfu/eslint-config",
3+
"rules": {
4+
"@typescript-eslint/no-unused-vars": "off"
5+
}
6+
}

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
.DS_Store
3+
dist

‎README.md

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
# vite-plugin-fonts
2+
3+
Webfont loader for vite
4+
5+
### Install
6+
7+
```sh
8+
npm i --save-dev vite-plugin-fonts # yarn add -D vite-plugin-fonts
9+
```
10+
11+
### Add it to vite.config.js
12+
13+
```ts
14+
// vite.config.js
15+
import ViteFonts from 'vite-plugin-fonts'
16+
17+
export default {
18+
plugins: [
19+
ViteFonts({
20+
google: {
21+
families: ['Source Sans Pro']
22+
},
23+
})
24+
],
25+
}
26+
```
27+
28+
29+
## Options
30+
31+
```ts
32+
// vite.config.js
33+
import ViteFonts from 'vite-plugin-fonts'
34+
35+
export default {
36+
plugins: [
37+
ViteFonts({
38+
// Typekit API
39+
typekit: {
40+
/**
41+
* Typekit project id
42+
*/
43+
id: '<projectId>',
44+
45+
/**
46+
* enable non-blocking renderer
47+
* <link rel="preload" href="xxx" as="style" onload="this.rel='stylesheet'">
48+
* default: true
49+
*/
50+
defer: true
51+
},
52+
53+
// Google Fonts API V2
54+
google: {
55+
/**
56+
* enable preconnect link injection
57+
* default: true
58+
*/
59+
preconnect: false,
60+
61+
/**
62+
* values: auto, block, swap(default), fallback, optional
63+
* default: 'swap'
64+
*/
65+
display: 'block',
66+
67+
/**
68+
* values: auto, block, swap(default), fallback, optional
69+
* default: undefined
70+
*/
71+
text: 'ViteAwsom',
72+
73+
74+
/**
75+
* Fonts families lists
76+
*/
77+
families: [
78+
// families can be either strings (only regular 400 will be loaded)
79+
'Source Sans Pro',
80+
81+
// or objects
82+
{
83+
/**
84+
* Family name (required)
85+
*/
86+
name: 'Roboto',
87+
88+
/**
89+
* Family styles
90+
*/
91+
styles: 'ital,wght@0,400;1,200',
92+
93+
/**
94+
* enable non-blocking renderer
95+
* <link rel="preload" href="xxx" as="style" onload="this.rel='stylesheet'">
96+
* default: true
97+
*/
98+
defer: true
99+
}
100+
]
101+
},
102+
})
103+
],
104+
}
105+
```
106+
107+
108+
## Ressources
109+
110+
- https://web.dev/optimize-webfont-loading/
111+
- https://csswizardry.com/2020/05/the-fastest-google-fonts/
112+
- _(unmaintained)_ https://www.npmjs.com/package/webfontloader

‎example/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Vite App</title>
7+
</head>
8+
<body>
9+
<h1>Hello Vite!</h1>
10+
<a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
11+
<script type="module" src="/main.ts"></script>
12+
</body>
13+
</html>

‎example/main.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import './style.css'

‎example/package.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "vite-test",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "vite build"
7+
},
8+
"dependencies": {
9+
"vite-fonts": "workspace: *"
10+
},
11+
"devDependencies": {
12+
"vite": "^2.0.0-beta.5"
13+
}
14+
}

‎example/style.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
body {
2+
font-family: 'Crimson Pro', Avenir, Helvetica, Arial, sans-serif;
3+
-webkit-font-smoothing: antialiased;
4+
-moz-osx-font-smoothing: grayscale;
5+
text-align: center;
6+
color: #2c3e50;
7+
margin-top: 60px;
8+
}
9+
10+
a {
11+
font-family: 'Open Sans', Avenir, Helvetica, Arial, sans-serif;
12+
}

‎example/vite.config.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { defineConfig } from 'vite'
2+
import ViteFonts from "vite-fonts";
3+
4+
export default defineConfig({
5+
plugins: [
6+
ViteFonts({
7+
google: {
8+
families: ['Crimson Pro', 'Open Sans'],
9+
},
10+
typekit: {
11+
id: 'glm4yoq',
12+
}
13+
})
14+
]
15+
})

‎package.json

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "vite-plugin-fonts",
3+
"version": "0.0.1",
4+
"description": "Webfont loader for vite",
5+
"author": "stafyniaksacha",
6+
"repository": "stafyniaksacha/vite-plugin-fonts",
7+
"license": "MIT",
8+
"main": "dist/index.js",
9+
"module": "dist/index.mjs",
10+
"types": "dist/index.d.ts",
11+
"files": [
12+
"dist"
13+
],
14+
"scripts": {
15+
"dev": "npm run build -- --watch",
16+
"example:dev": "npm -C example run dev",
17+
"example:build": "npm -C example run build",
18+
"build": "tsup src/index.ts --dts --format cjs,esm",
19+
"lint": "eslint --ext .ts ./src",
20+
"lint:fix": "eslint --fix --ext .ts ./src"
21+
},
22+
"dependencies": {
23+
"vite": "^2.0.0-beta.5"
24+
},
25+
"devDependencies": {
26+
"@antfu/eslint-config": "^0.4.3",
27+
"@typescript-eslint/eslint-plugin": "^4.12.0",
28+
"eslint": "^7.17.0",
29+
"tsup": "^3.11.0",
30+
"typescript": "^4.1.3"
31+
}
32+
}

0 commit comments

Comments
 (0)