Skip to content

Commit 80960c5

Browse files
stafyniaksachastafyniaksacha
authored
Merge pull request #8 from shorwood/main
Added `custom` font support
2 parents cfddeef + bddb082 commit 80960c5

File tree

14 files changed

+1304
-1184
lines changed

14 files changed

+1304
-1184
lines changed

‎README.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,12 @@ export default {
2525
}
2626
```
2727

28+
### Import generated `@font-rules` CSS
29+
Only needed if using local/custom fonts
30+
```ts
31+
// main.ts
32+
import 'virtual:fonts.css'
33+
```
2834

2935
## Options
3036

@@ -100,6 +106,41 @@ export default {
100106
}
101107
]
102108
},
109+
110+
// Custom fonts.
111+
custom: {
112+
/**
113+
* Fonts families lists
114+
*/
115+
families: [{
116+
/**
117+
* Name of the font family.
118+
*/
119+
name: 'Roboto',
120+
/**
121+
* Local name of the font. Used to add `src: local()` to `@font-rule`.
122+
*/
123+
local: 'Roboto',
124+
/**
125+
* Regex(es) of font files to import. The names of the files will
126+
* predicate the `font-style` and `font-weight` values of the `@font-rule`'s.
127+
*/
128+
src: './src/assets/fonts/*.ttf',
129+
}],
130+
131+
/**
132+
* Defines the default `font-display` value used for the generated
133+
* `@font-rule` classes.
134+
*/
135+
display: 'auto',
136+
137+
/**
138+
* Using `<link rel="preload">` will trigger a request for the WebFont
139+
* early in the critical rendering path, without having to wait for the
140+
* CSSOM to be created.
141+
*/
142+
preload: true
143+
}
103144
})
104145
],
105146
}

‎example/assets/fonts/DancingScript-Bold.ttf‎

79.3 KB
Binary file not shown.

‎example/assets/fonts/DancingScript-Medium.ttf‎

79.3 KB
Binary file not shown.

‎example/assets/fonts/DancingScript-Regular.ttf‎

79 KB
Binary file not shown.

‎example/assets/fonts/DancingScript-SemiBold.ttf‎

79.3 KB
Binary file not shown.

‎example/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<body>
99
<h1>Hello Vite!</h1>
1010
<a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
11+
<h3>I'm using a local font !</h3>
1112
<script type="module" src="/main.ts"></script>
1213
</body>
1314
</html>

‎example/main.ts‎

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

‎example/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
"version": "0.0.0",
44
"scripts": {
55
"dev": "vite",
6-
"build": "vite build"
6+
"build": "vite build",
7+
"preview": "vite preview"
78
},
89
"devDependencies": {
910
"vite": "^2.0.0",

‎example/style.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,10 @@ body {
1010
a {
1111
font-family: "Open Sans", Avenir, Helvetica, Arial, sans-serif;
1212
}
13+
14+
h3 {
15+
font-family: "Dancing Script", sans-serif;
16+
font-size: 3rem;
17+
font-weight: 600;
18+
}
19+

‎example/vite.config.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@ export default defineConfig({
77
google: {
88
families: ['Crimson Pro', 'Open Sans', 'Material+Icons'],
99
},
10+
11+
custom: {
12+
families: {
13+
'Dancing Script': './assets/fonts/DancingScript*',
14+
},
15+
},
1016
}),
1117
],
1218
})

0 commit comments

Comments
 (0)