File tree 1 file changed +44
-2
lines changed
1 file changed +44
-2
lines changed Original file line number Diff line number Diff line change 1
1
# Nuxt Webfontloader - Efficient web font loading has never been easier!
2
-
2
+
3
3
[ ![ npm (scoped with tag)] ( https://img.shields.io/npm/v/nuxt-webfontloader/latest.svg?style=flat-square )] ( https://npmjs.com/package/nuxt-webfontloader )
4
4
[ ![ npm] ( https://img.shields.io/npm/dt/nuxt-webfontloader.svg?style=flat-square )] ( https://npmjs.com/package/nuxt-webfontloader )
5
5
[ ![ Build Status] ( https://travis-ci.com/Developmint/nuxt-webfontloader.svg?branch=master )] ( https://travis-ci.com/Developmint/nuxt-webfontloader )
33
33
}
34
34
```
35
35
36
- - Include your webfontloader options in the ` nuxt.config.js ` , for example:
36
+ - Include your webfontloader options in the ` nuxt.config.js ` , for example:
37
37
38
38
``` js
39
39
export default {
@@ -59,6 +59,48 @@ export default {
59
59
}
60
60
```
61
61
62
+ ## Adding Google Fonts with Font Display option
63
+
64
+ If you like to use Goggle Fonts with font-display option, this is possible.
65
+
66
+ ** But there is a small difference if you want to add only one Font Family or more than one** .
67
+
68
+ Here an example for adding ** one font family** with font-display option:
69
+
70
+ ``` js
71
+ export default {
72
+ webfontloader: {
73
+ google: {
74
+ // Loads Open Sans font with weights 300 and 400 + display font as swap
75
+ families: [' Open+Sans:300:400:600&display=swap' ]
76
+ }
77
+ },
78
+ }
79
+
80
+ ```
81
+
82
+ Here an example for adding ** more font families** with font-display option:
83
+
84
+ ``` js
85
+ export default {
86
+ webfontloader: {
87
+ // add Google Fonts as "custom" | workaround required
88
+ custom: {
89
+ families: [
90
+ ' Open Sans:n3,n4' ,
91
+ ' Roboto:n3,n7'
92
+ ],
93
+ urls:
94
+ // for each Google Fonts add url + options you want
95
+ // here add font-display option
96
+ ' https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap'
97
+ ' https://fonts.googleapis.com/css?family=Roboto:300,700&display=swap'
98
+ ]
99
+ }
100
+ },
101
+ }
102
+ ```
103
+
62
104
## Development
63
105
64
106
- Clone this repository
You can’t perform that action at this time.
0 commit comments