Skip to content

Commit 9895e2f

Browse files
valeriosillariTheAlexLichter
authored andcommitted
docs: add font display swap example (#25)
1 parent 387e73e commit 9895e2f

File tree

1 file changed

+44
-2
lines changed

1 file changed

+44
-2
lines changed

README.md

+44-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# Nuxt Webfontloader - Efficient web font loading has never been easier!
2-
2+
33
[![npm (scoped with tag)](https://img.shields.io/npm/v/nuxt-webfontloader/latest.svg?style=flat-square)](https://npmjs.com/package/nuxt-webfontloader)
44
[![npm](https://img.shields.io/npm/dt/nuxt-webfontloader.svg?style=flat-square)](https://npmjs.com/package/nuxt-webfontloader)
55
[![Build Status](https://travis-ci.com/Developmint/nuxt-webfontloader.svg?branch=master)](https://travis-ci.com/Developmint/nuxt-webfontloader)
@@ -33,7 +33,7 @@
3333
}
3434
```
3535

36-
- Include your webfontloader options in the `nuxt.config.js`, for example:
36+
- Include your webfontloader options in the `nuxt.config.js`, for example:
3737

3838
```js
3939
export default {
@@ -59,6 +59,48 @@ export default {
5959
}
6060
```
6161

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+
62104
## Development
63105

64106
- Clone this repository

0 commit comments

Comments
 (0)